Question

我正在研究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;
    });
})

}

在这个部分组件中，我的目的是读取路由参数（id，pid），然后调用service方法。但是因为要读取2个路由参数，所以服务方法被调用两次。

知道需要修改什么才能调用服务方法一次吗？

Answer 1

您可以使用switchMap：

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

Answer 2

来自this链接的文字解决了我的问题。

现在，如果在检测到组件的内容/视图子项的更改期间发生错误，则将两次调用ngOnInit（在DynamicChangeDetector中看到）。这可能会导致隐藏原始错误的后续错误。

在我的情况下，我的组件中还有一些其他错误，导致ngOnInit（）执行两次..希望这对其他人有帮助。我在这个问题上花了2个小时:(

Angular 2中的路由参数

2 个答案: