我的 routerLinkActive 有问题。
这里有两个GIF来解释。
- 第一个问题：当我启动应用程序时，没有一个 routerLinkActive 让课程处于活动状态。但如果我点击不同的路线，那最终会奏效。
- 当我首先单击当前路线时，不显示课程。
这是我的代码：
<ul class="nav">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
<a [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ul>
这是我的路线树。（红色是调用的组件）
和我的路线代码：
import ...
const routes : Routes = [
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: 'dashboard',
component: DashboardComponent
}, ..., {
path: 'challenges',
component: ImageRankComponent
}, {
path: 'niveau',
component: LevelComponent
}, {
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
}
],
exports: [RouterModule]
})
export class HomeRoutingModule {}
和 menuItem 是：
this.menuItems = ROUTES.filter(menuItem => menuItem);
const ROUTES : RouteInfo[] = [{
path: 'dashboard',
title: 'Dashboard',
icon: 'dashboard',
class: ''
}, {
path: 'challenges',
title: 'Tous les challenges',
icon: 'dashboard',
class: ''
},
{
path: 'niveau',
title: 'Niveau en ligne',
icon: 'dashboard',
class: ''
}]
你知道我的问题是什么吗？
编辑：
我努力了：
绝对路线。IE：
path: '/home/dashboard'
和
<a [routerLink]="menuItem.path">
和
<a [routerLink]="[menuItem.path]">
结果是一样的。不工作。
编辑2：
添加：
[routerLinkActiveOptions]="{exact: true}" 到：
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">
不能解决问题。
编辑3：
扩展 Augury 告诉我 routerLink 对于好路由是正确的。但是该类未在 DOM 中激活。
编辑4：
所以，我做了一些探索。
我发现如果我将 menuComponent（侧边栏）放在父根目录中，那是有效的，我会显示活动类（但我不想把它放在父目录中）
编辑5：
我已经对这种情况做了一个检查......而且这个工作很有效......我不明白。