angular 4。のrouterLinkActiveに問題があります。この設定があります。
export const FruitRoutes = [
{
path: 'fruits/:id', component: FruiteNav,
children: [
{path: '', component: FruitGeneral},
{path: 'settings', component: FruitSettings}
]
}
];
単一の果物のタブページです。例:fruits/4([一般]タブ)およびfruits/4 /設定([設定]タブ)
タブナビゲーター(FruitNav)は次のように設定され、ほとんどの場合に機能します。
<ul class="nav nav-tabs">
<li class="nav-item">
<a [routerLink]="['/fruits', fruitId]" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">General</a>
</li>
<li class="nav-item">
<a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a>
</li>
</ul>
<router-outlet></router-outlet>
今siの問題:ルートは現在fruits/4にあります。子タブのいずれか、またはメインのnavクラスにいて、別のfruitIdを呼び出すと、routerLinkActiveは機能しません。例:
<a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link">Test</a>
フルーツ/ 5に移動しますが、どのタブもアクティブ/選択されません
典型的なユースケースは、ユーザーがナビゲートできる同様の果物のリストです。
誰かがこれに対する解決策を持っていますか?
私はそれを考え出した。ルート構成が正しく設定されていませんでした。 「親」ルートは、次のように「デフォルトタブ」ルートにリダイレクトする必要があります。
export const FruitRoutes = [
{
path: 'fruits/:id', component: FruiteNav,
children: [
{path:'',redirectTo: 'general',pathMatch: 'full'},
{path: 'general', component: FruitGeneral},
{path: 'settings', component: FruitSettings}
]
}
];
次に、一般タブリンクのrouterLinkを次のように変更しました。
<ul class="nav nav-tabs">
<li class="nav-item">
<a [routerLink]="['/fruits', fruitId,'general']" class="nav-link" routerLinkActive="active">General</a>
</li>
<li class="nav-item">
<a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a>
</li>
</ul>
<router-outlet></router-outlet>
多田!できます!