Route Parameters in Angular 2

Question

I am working on sample Angular 2 application , and below is the code of one of my components.

export class ProductComponent implements OnInit {

  product:Product;

  constructor(private appService: AppService , private router:Router ,private route:ActivatedRoute) {}

 ngOnInit() 
 {

    let id:string;
    let pid:string;

    this.route.params.subscribe( (params) => {
    id = params['id'];
    pid = params['pid'];       
    this.appService.GetProduct(id,pid).subscribe( data => {
        this.product = data;
    });
})

}

In this partcular component , my intention is to read both the route parameters(id , pid) and then make a call to service method. But because there are 2 route parameters to read , the service method is called twice.

Any idea what needs to be modified so that service method is called once ?

Your saying `this.appService.GetProduct()`is being called twice because there are two route parameters? — Abdullah Rasheed, Dec 25 '16 at 16:27

score 0 · Answer 1 · answered Dec 25 '16 at 16:23

0

You can use switchMap:

this.route.params
.switchMap(({id, pid}) => appService.GetProduct(id,pid))
.subscribe(data => this.product = data);

answered Dec 25 '16 at 16:23

undefined

6,366
12
46
90

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Below text from this link solved my issue.

Right now, if an error happens during detecting changes of content/view children of a component, ngOnInit will be called twice (seen in DynamicChangeDetector). This can lead to follow up errors that hide the original error.

In my case also , there was some other error in my component , which resulted in ngOnInit() executing twice.. hope this will be helpfull to others. I had spent 2 hrs on this issue :(

Route Parameters in Angular 2

2 Answers2