我在 Angular 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 但没有任何选项卡将被激活/选中
一个典型的用例可能是用户可以导航到的类似水果的列表。
有人对此有解决方案吗?
最佳答案
我想通了。我的路线配置设置不正确。 “父”路由应该重定向到我的“默认选项卡”路由,如下所示:
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>
多田!它有效!
关于angular - 仅参数更改时,Angular 4 中的 routerLinkActive 不添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44800804/