首页 文章

只有参数更改时，Angular 4中的routerLinkActive不会添加类

提问于
浏览 次
6

我有角度4的routerLinkActive问题 . 我有这个设置 .

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

这是一个单一水果的标签页 . 例如：fruits / 4（常规标签）和水果/ 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问题：该路线目前处于水果/ 4 . 如果我在任何子选项卡中，甚至在主nav类中，并且调用另一个fruitId，则routerLinkActive将不起作用 . 例如：

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

将导航到fruit / 5，但不会激活/选择任何选项卡

典型的用例可以是用户可以导航到的类似果实的列表 .

有人有解决方案吗？

angular routerlink routerlinkactive

1 回答

  • 4

    我想到了 . 我的路由配置未正确设置 . “父”路线应重定向到我的“默认标签”路线，如下所示：

    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>

    田田！有用！

    回复于

相关问题