web-dev-qa-db-ja.com

routerLinkActive in Angular 4は、パラメーターのみが変更された場合、クラスを追加しません

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に移動しますが、どのタブもアクティブ/選択されません

典型的なユースケースは、ユーザーがナビゲートできる同様の果物のリストです。

誰かがこれに対する解決策を持っていますか？

angularrouterlinkrouterlinkactive
6
Jens Alenius

私はそれを考え出した。ルート構成が正しく設定されていませんでした。 「親」ルートは、次のように「デフォルトタブ」ルートにリダイレクトする必要があります。

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>

多田！できます！

4
Jens Alenius