Question

我正在浏览Angular 2 tutorial about routing。在某些时候，他们添加路由/detail/:id并添加ngOnInit()方法来处理此路由，尤其是获取:id参数：

ngOnInit(): void {
  this.route.params.forEach((params: Params) => {
    let id = +params['id'];
    this.heroService.getHero(id)
      .then(hero => this.hero = hero);
  });
}

我不明白的部分是为什么它们在路由参数上循环？由于只能有一个ID，是不是可以使用this.route.params['id']来获取它？

另外，如果确实存在多个ID，那么循环它们会有什么意义呢，因为每个新英雄只会替换前一个？

Answer 1

当路径以仅参数更改的方式更改时（例如id中的/somepath/:id/otherPath），路由器不会离开并返回到同一组件，而是保持相同的组件并发出参数更改事件。

对于每个事件(params:Params) => { ... }都已执行。

Answer 2

现在你可以这样做：首先从rxjs导入switchMap

import 'rxjs/add/operator/switchMap';

然后

this.route.params
    .switchMap((params: Params) => this.heroService.getHero(+params['id']))
    .subscribe(hero => this.hero = hero);

Answer 3

首先，你在这里使用的forEach（）方法不是Array.prototype.forEach（）而是它的Rx.Observable.prototype.forEach（）。

Angular 2 route.params - 给出一个Observable数组。使用lambda在this数组上调用forEach（）与调用每个参数的订阅相同。

此外，订阅params的原因是，当组件从其他组件路由或刷新时，将调用ngOnInit（）。如果参数中的值未使用，则如果您使用不同的参数值路由到同一组件，则它将不起作用，因为在这种情况下不会调用ngOnInit。

请参阅 the Rx.Observable.prototype.forEach

Answer 4

要检索单个 ID ，您也可以使用此

let id = +this.route.snapshot.params['id'];

Answer 5

你现在可能已经知道了，但我认为你需要得到的概念是params不是一个数组，它是一个Observable。

console.log(this.route.params['id']); // undefined
this.route.params.forEach(x => console.log(x['id'])); // the id e.g 999

正如其他人所提到的那样，在使用快照时，有多种方法可以获得id，因为在重用组件时它不会更新。

为什么他们在这个Angular教程中循环路由参数？

5 个答案: