RouterLinkActiveに問題があります。
以下に2つのGifを説明します。
ここに私のコードがあります:
<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: ''
}]
何が私の問題になりうるかご存知ですか?
編集:
私が試してみました:
絶対ルート。すなわち:
path: '/home/dashboard'
と
<a [routerLink]="menuItem.path">
そして
<a [routerLink]="[menuItem.path]">
そして結果は同じです。動作していません。
EDIT2:
追加:
[routerLinkActiveOptions] = "{exact:true}"へ:
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">
問題を解決しません。
EDIT3:
拡張機能Auguryは、routerLinkが良いルートに当てはまると言っています。しかし、クラスはDOMでアクティブ化されません。
EDIT4:
だから、私はいくつかの調査を行いました。
MenuComponent(サイドバー)を親ルートに置くと、それが機能していると、アクティブなクラスが表示されます(しかし、親に入れたくない))
EDIT5:
私は状況のプランカーをしました...そして、プランカーは動作します...私はそれを取得できません。
だから私はこの問題に多くの時間を費やしました。
https://github.com/angular/angular/issues/19167
問題は:angular 2ではなく、angular 4。
angular 4:のハックを見つけました。
<li *ngFor="let menuItem of menuItems" [routerLinkActive]="" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive"class="{{menuItem.class}}">
<a [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
</li>
で:
[routerLinkActive]="" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive"
EDIT ANGULAR 5:
Angular 5で、バグはなくなりました!
これを試してください:
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a>Home</a>
</li>
HomeComponentが遅延ロードされているように見えます。ルートをルートコンポーネントに移動する必要はありません。 RouterModuleをルートコンポーネントに追加してみてください。
もっと こちら