Angular 2 中的路由参数

Posted 2023-03-13

【中文标题】Angular 2 中的路由参数

【英文标题】：Route Parameters in Angular 2

【发布时间】：2017-05-10 09:58:25

【问题描述】：

我正在开发示例 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），然后调用服务方法。 但是因为要读取2个路由参数，所以服务方法被调用了两次。

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

【问题讨论】：

你的说法this.appService.GetProduct()被调用了两次，因为有两个路由参数？

【参考方案1】：

你可以使用switchMap：

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

【参考方案2】：

this 链接中的以下文字解决了我的问题。

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

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