angular6.x 如何获取路由的参数，在线等

Question

如题:angular新手，实在没看明白官方获取路由参数的方法，代码如下

//  /#/store/assets-list/case  
/*
    路由规则如下：
    store为父路由
    assets-list为子路由
    case为路由的id
    需求：现在需要在进入assets-list组件的时候在ngOnInit的时候就获取
*/

问题如下

// assets-list组件的部分代码如下
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
constructor(
    private router: Router,
    private routerParams: ActivatedRoute
  ) { }
ngOnInit() {
    this.routerParams.snapshot.paramMap.get('id')  // 此时我可以通过这个快照拿到这个id，但是仅仅只能拿到一次
}
/*
* 因为我需要根据不用的菜单项去传递参数（也就是case部分），但是组件仅仅只渲染一次，只是根据页面参数的变化然后每次重新获取id,去调用请求的方法获取数据，渲染组件
* 因为具体的操作是在父组件执行的，所以我并不能拿到具体的事件
* 所以我想通过监听路由参数的变化去执行获取数据的方法，类似于vue中的 watch router
*/

有看了官方的文档好像要使用Observable对象，但将官方的demo代码照搬，完全拿不到结果（没有报错）
在线等啊

Answer 1

对于这种子组件只渲染一次,但很多连接会路由到这个子组件的情况,是不能用快照取ID的,快照取到的ID只是第一次渲染时候的ID,应该用ActivatedRoute服务的paramMap属性,paramMap是一个Observable对象,每次路由变化,都会emit一个(params: ParamMap)对象,然后用params.get('id')来获取这个ID

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  this.route.paramMap.subscribe((params: ParamMap)=>{
    const id = params.get('id')
    })
}

官网上的例子并没有subscribe这个Observable对象,而是用了switchMap操作符,是因为他拿到ID又发了一个http请求,switchMap负责打平这个请求的Observable,然后在模板中用 async 管道符来订阅

<h2>HEROES</h2>
  <ul class="items">
    <li *ngFor="let hero of heroes$ | async"
      [class.selected]="hero.id === selectedId">
      <a [routerLink]="['/hero', hero.id]">
        <span class="badge">{{ hero.id }}</span>{{ hero.name }}
      </a>
    </li>
  </ul>

  <button routerLink="/sidekicks">Go to sidekicks</button>