ページの再読み込み後にRouterLinkActiveが設定されていません

Question

ルーティングとナビゲーションを使用しています。私は[routerLinkActive]="['active']"を使ってリンクをアクティブにしています。他のルートに移動するとうまく動作します。

しかし、現在のページがリフレッシュされると、 'routerLinkActive'は動作しておらず、リンクはアクティブではありません。私はそれを再びアクティブにするためにそのリンクを選択する必要があります。 ページが再ロードされると、そのリンクをアクティブにする方法はありますか？

サンプル：

アプリ-routing.ts

{ 
    path: 'home', 
    children: [ 
     {path: 'product', component: ProductComponent}, 
     {path: 'dualList', component: DualListComponent}, 
     {path: 'member', component: MemberComponent}, 
     {path: '', component: HomeComponent} 
    ] 
    }, 
    {path: 'about', component: AboutComponent} 

home.component.html

<a [routerLink] = "['/home', 'product']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Product</a> 
    <a [routerLink] = "['/home', 'dualList']" routerLinkActive="active">Dual List</a> 
    <a style="padding-left: 20px" [routerLink] = "['/home', 'member']" routerLinkActive="active">Member</a> 

任意の助けいただければ幸いです。

Answer 1

は次のようにしてみてください：

あなたが唯一のホーム・ページURLのrouterLinkActiveOptionsを設定することができます。

<ul> 
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"> 
     <a routerLink="/">Home</a> 
    </li> 
    <li routerLinkActive="active"> 
     <a [routerLink]="['home/product']">Product</a> 
    </li> 
    <li routerLinkActive="active"> 
     <a [routerLink]="['home/dualList']">Dual List</a> 
    </li> 
    <li routerLinkActive="active"> 
     <a [routerLink]="['home/member']">Member</a> 
    </li> 
</ul> 

Answer 2

私はあなたがレンダラread thisを認識していないと思う 、それが動作します。この希望をお試しください：

in home.component.ts（home.component.htmlに関連）

​​

home.component.html

<li role="presentation" (click)="userTypeSelect($event)" [routerLinkActive]="['active']"> 
    <a routerLink="/product">Product page</a> 
</li>