web-dev-qa-db-ja.com

Angular 2/4-routerLinkActiveが正しく機能していません

RouterLinkActiveに問題があります。

以下に2つのGifを説明します。

  1. 最初の問題：アプリを起動すると、routerLinkActiveのいずれもクラスをアクティブにしません。しかし、別のルートをクリックすると、最終的に機能します。

enter image description here

  1. 現在のルートを最初にクリックしても、クラスは表示されません。

enter image description here

ここに私のコードがあります：

<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>

これが私のルートのツリーです。 （赤で呼び出されたコンポーネント）

enter image description here

と私のルートコード：

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でアクティブ化されません。

enter image description here

enter image description here

EDIT4：

だから、私はいくつかの調査を行いました。

MenuComponent（サイドバー）を親ルートに置くと、それが機能していると、アクティブなクラスが表示されます（しかし、親に入れたくない））

Moving the menu to the parent works.

EDIT5：

私は状況のプランカーをしました...そして、プランカーは動作します...私はそれを取得できません。

https://plnkr.co/edit/7KMlY2

angularrouterlinkrouterlinkactive
18
Wandrille

だから私はこの問題に多くの時間を費やしました。

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で、バグはなくなりました！

8
Wandrille

これを試してください：

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a>Home</a>
</li>
9
Vignesh

HomeComponentが遅延ロードされているように見えます。ルートをルートコンポーネントに移動する必要はありません。 RouterModuleをルートコンポーネントに追加してみてください。

もっと こちら

0
Surender Kherwa