[英]routerLinkActive in Angular 4 doesn't add class when only parameter changes
我有角度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', 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>
田田! 有用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.