Question

我试图用参数实现基本路线，模仿英雄样本（https://angular.io/docs/ts/latest/guide/router.html）。我的AppModule声明了一个路径：

const appRoutes: Routes = [
   { path: '',        component: AllStuffComponent },
   { path: 'stuff/:id', component: SingleStuffComponent },
];

我的SingleStuffComponent看起来如下，只是为了测试机制：

export class SingleGuiComponent implements OnInit {

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

  ngOnInit() {
    this.route.params
      .switchMap((params: Params) => params['id'])
      .subscribe((id: any) => console.info("ID=" + id));
  }
}

我尝试在http://localhost:3000/stuff/2345的浏览器中创建一个网址。但在调试器中，我看到了：

ID=2
ID=3
ID=4
ID=5

为什么会这样？我只期望ID=2345的单一控制台日志。

Answer 1

我认为你应该尝试只使用map（）函数来提取ID，它会起作用。

this.route.params
        .map((params: Params) => params['id'])
        .subscribe((id: any) => console.info("ID=" + id));

您将主要使用switchMap（）从map（）获取发出的ID，并将其用于新的API调用或类似的东西，这样您就不必嵌套2个订阅函数。

示例：

this.route.params
        .map((params: Params) => params['id'])
        .switchMap(id => this._someService.getSomething(id))
        .subscribe((result: any) => {
           console.log(result);
        });

没有switchMap（），你必须这样做：

this.route.params
  .map((params: Params) => params['id'])
  .subscribe((id) => {
    this._someService
      .getSomething(id)
      .subscribe(result => this.result = result);
  });

Angular 2 Routes的行为不符合预期

1 个答案: