鍍金池/ 問答/HTML5  HTML/ angular6.x 如何獲取路由的參數(shù)，在線等

angular6.x 如何獲取路由的參數(shù)，在線等

如題:angular新手，實(shí)在沒看明白官方獲取路由參數(shù)的方法，代碼如下

//  /#/store/assets-list/case  
/*
    路由規(guī)則如下：
    store為父路由
    assets-list為子路由
    case為路由的id
    需求：現(xiàn)在需要在進(jìn)入assets-list組件的時(shí)候在ngOnInit的時(shí)候就獲取
*/

問題如下

// assets-list組件的部分代碼如下
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
constructor(
    private router: Router,
    private routerParams: ActivatedRoute
  ) { }
ngOnInit() {
    this.routerParams.snapshot.paramMap.get('id')  // 此時(shí)我可以通過這個(gè)快照拿到這個(gè)id，但是僅僅只能拿到一次
}
/*
* 因?yàn)槲倚枰鶕?jù)不用的菜單項(xiàng)去傳遞參數(shù)（也就是case部分），但是組件僅僅只渲染一次，只是根據(jù)頁面參數(shù)的變化然后每次重新獲取id,去調(diào)用請(qǐng)求的方法獲取數(shù)據(jù)，渲染組件
* 因?yàn)榫唧w的操作是在父組件執(zhí)行的，所以我并不能拿到具體的事件
* 所以我想通過監(jiān)聽路由參數(shù)的變化去執(zhí)行獲取數(shù)據(jù)的方法，類似于vue中的 watch router
*/

有看了官方的文檔好像要使用Observable對(duì)象，但將官方的demo代碼照搬，完全拿不到結(jié)果（沒有報(bào)錯(cuò)）
在線等啊

回答
編輯回答
殘淚

對(duì)于這種子組件只渲染一次,但很多連接會(huì)路由到這個(gè)子組件的情況,是不能用快照取ID的,快照取到的ID只是第一次渲染時(shí)候的ID,應(yīng)該用ActivatedRoute服務(wù)的paramMap屬性,paramMap是一個(gè)Observable對(duì)象,每次路由變化,都會(huì)emit一個(gè)(params: ParamMap)對(duì)象,然后用params.get('id')來獲取這個(gè)ID

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

官網(wǎng)上的例子并沒有subscribe這個(gè)Observable對(duì)象,而是用了switchMap操作符,是因?yàn)樗玫絀D又發(fā)了一個(gè)http請(qǐng)求,switchMap負(fù)責(zé)打平這個(gè)請(qǐng)求的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>
2017年10月4日 02:45