0

このようなルーティング設定があります

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        {
            path: 'list/:itemId/:subNavItemId',
            component: ListItemCmp,
        }
    ]
}

ListCmp から項目を選択し、たとえば「list/123」に移動します

ListCmp Constructor/OnInit では、:itemId を使用していくつかのデータをフェッチし、SubNavItems のリストを返します。そこから、最初の SubNavItem の ID をパラメーターとして追加する必要があります (routerLinkActive を強調表示したり、その他のフェッチ目的で)。

constructor(route:ActivatedRoute, http:HttpClient, router:Router){
   let id = route.params.itemId
   http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
   })
}

これにより、現在の ListItemCmp が破棄され、新しい ListItemCmp がインスタンス化されます。どうすればそれを防ぐことができますか? location.go() メソッドを試しましたが、それは routerLinkActive をトリガーしません

4

2 に答える 2

0

ハードルーティングの代わりにクエリパラメータを使用できます

    constructor(route: ActivatedRoute) {
    let id = route.params.itemId
    http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
    })
    this.activatedRoute.queryParamMap.subscribe(query => {
      if (query['params']['subNavItemId']) {
        // perform some action
      }
    });
  }

ルーターで「list/:itemId/:subNavItemId」を削除できるようになりました

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        // you can remove below route
// {
         //    path: 'list/:itemId/:subNavItemId',
         //    component: ListItemCmp,
       //  }
    ]
}
于 2018-11-21T11:10:30.463 に答える