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

发布时间：2020-12-17 06:59:58 所属栏目：安全来源：网络整理

导读：我有角度4的routerLinkActive问题.我有这个设置. export const FruitRoutes = [ { path: 'fruits/:id',component: FruiteNav,children: [ {path: '',component: FruitGeneral},{path: 'settings',component: FruitSettings} ] }]; 这是一个单一水果的标签页.

我有角度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>

现在的问题是：这条路线目前处于水果/ 4.如果我在任何子选项卡中,甚至在主nav类中,并且调用另一个fruitId,则routerLinkActive将不起作用.例如：

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

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

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

有人有解决方案吗？

解决方法

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

export const FruitRoutes = [
    {
        path: 'fruits/:id',children: [
            {path:'',redirectTo: 'general',pathMatch: 'full'},{path: 'general',component: FruitSettings}
        ]
    }
];

然后我将routerLink更改为常规选项卡链接：

<ul class="nav nav-tabs">
        <li class="nav-item">
            <a [routerLink]="['/fruits','general']" class="nav-link" routerLinkActive="active">General</a>
            </li>
            <li class="nav-item">
                <a [routerLink]="['/fruits','settings']" class="nav-link" routerLinkActive="active">Settings</a>
            </li>
        </ul>

    <router-outlet></router-outlet>

田田！有用！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!