Angular 2中的路由参数
问题描述:
我正在处理Angular 2示例应用程序,下面是我的一个组件的代码。Angular 2中的路由参数
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;
});
})
}
在这种partcular成分,我的意图是读两种路由参数(ID,PID),然后对服务方法的调用。 但由于要读取2个路由参数,服务方法被调用两次。
任何想法需要修改什么以便服务方法被调用一次?
答
以下文字来自this链接解决了我的问题。
现在,如果在检测组件的内容/视图子级更改期间发生错误,ngOnInit将被调用两次(在DynamicChangeDetector中可见)。这可能导致跟踪错误,从而隐藏原始错误。
在我的情况下,我的组件还有一些其他错误,导致ngOnInit()执行两次..希望这对其他人有用。我在这个问题上花了2小时:(
答
您可以使用switchMap:
this.route.params
.switchMap(({id, pid}) => appService.GetProduct(id,pid))
.subscribe(data => this.product = data);
你说'this.appService.GetProduct()'被调用两次,因为有两个路由参数? – inspired