複数の同様のルートのアクティブなルート

Question

私は以下のリンク項目を持っていて、複数のリンクでアクティブにしたいと考えています。それは可能ですか？

<li class="nav-item"> 
     <a class="nav-link" routerLinkActive="active" [routerLink]="['/testGame/list']"><i class="icon-game-controller"></i> baran</a> 
    </li> 

私はあなたが

{ path: 'testGame/:id', component: TestGameComponent } 

今あなたがいずれかを渡すことができ、以下のようなあなたのルートを定義することがあり、このリンクは

http://localhost:4200/#/testGame/crud 

http://localhost:4200/#/testGame/list 

おかげ

Answer 1

以下の両方のリンクのために積極的になりたいですparamを同じルートに設定します。

ルーティングに関する詳細な文書はhereです。

更新：

あなたが任意の数の特徴を持つように高めることができる独自のRouterLinkActiveディレクティブを、書くことができ、私が持っているものPlunker!!

@Input() startsWith: string = ""; 

private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean { 
    return (link: RouterLink | RouterLinkWithHref) =>{ 
     if(!!this.startsWith){ 
      return router.url.indexOf(this.startsWith) > -1; 
     }else{ 
     return router.isActive(link.urlTree, this.routerLinkActiveOptions.exact); 
     } 
    } 
    } 

で

チェックこの実装をdoneは角度ライブラリのコードを単純にコピーし、追加のプロパティに基づいてルートが一致する部分を更新しました

<a customRouterLinkActive="active" routerLink="/testGame/crud" startsWith="testGame" > 
Crud 
</a> 

これが役立ちますように！