获取路线中的当前参数 - Angular 4

Question

我只想在 Angular 路由器更改时接收当前参数。

根据另一篇 SO 帖子，如果路由器导航到同一组件中的另一个参数，我的组件将不会自动刷新，但是在激活路由时我无法获取参数（因此我可以更新视图）。

Angular 文档有这样的内容：

  ngOnInit() {
    this.hero$ = this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.service.getHero(params.get('id')));
  }

但是，这对我不起作用，或者至少，拥有一些不抽象为其他方法或服务的东西会很好。

是否有一种简单直接的方式来订阅当前参数？

Answer 1

新的 paramMap 最简单的方法：

import { ActivatedRoute } from '@angular/router';
...
constructor(private activeRoute: ActivatedRoute) { 
       this.subscription = this.activeRoute.paramMap
        .subscribe(params => {
            if(params.get('id') !== this.myParam) {
                this.myParam= params.get('id');
                //Do things with new parameter - e.g. reload data
            }
        });
}

您还可以使用params.getAll 或params.keys 来获取有关可用参数的信息。

如果ActivatedRoute 没有填充任何参数，您可以通过订阅所有路由器事件并查看参数的去向进行故障排除：

this.routeChangeDetection = this.router.events.subscribe((event) => {
    console.log(this.activeRoute);
    console.log(this.activeRoute.snapshot);
    console.log(this.activeRoute.snapshot.params);
    console.log(this.activeRoute.snapshot.children);
})

如果您的参数被加载到子/相关组件中，而不是正在寻找参数更改的组件，这可能很有用。