Angular 4中的routerLinkActive仅在参数更改时不添加类答案

【问题标题】：routerLinkActive in Angular 4 doesn't add class when only parameter changesAngular 4中的routerLinkActive仅在参数更改时不添加类
【发布时间】：2017-12-01 17:15:08
【问题描述】：

我在角度 4 中遇到 routerLinkActive 问题。我有这个设置。

export const FruitRoutes = [
    {
        path: 'fruits/:id', component: FruiteNav,
        children: [
            {path: '', component: FruitGeneral},
            {path: 'settings', component: FruitSettings}
        ]
    }
];

这是一个单一水果的标签页。例如：fruits/4（常规选项卡）和 fruits/4/settings（设置选项卡）

标签导航器（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。如果我在任何子选项卡中，甚至在主导航类中，并调用另一个fruitId，routerLinkActive 将不起作用。例如：

<a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link">Test</a>

将导航到fruit/5，但没有一个选项卡将处于活动状态/选中

一个典型的用例可能是用户可以导航到的类似水果的列表。

有人对此有解决方案吗？

【问题讨论】：

标签： angular routerlink routerlinkactive

【解决方案1】：

我想通了。我的路由配置未正确设置。 “父”路由应该重定向到我的“默认选项卡”路由，如下所示：

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>

多田！它有效！

【讨论】：