角度2/4-routerLinkActive无法正常工作 [英] Angular 2/4 - routerLinkActive not working properly

问题描述

我的routerLinkActive有问题.

I have a problem with my routerLinkActive.

这里有两个Gif来解释.

Here is two Gifs to explain.

1. 第一个问题:启动应用程序时，routerLinkActive没有一个使该类处于活动状态.但是，如果我单击其他路线，则最终效果会正常.

1. 当我第一次单击当前路线时，该班级不会显示.

这是我的代码:

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

这是我那条路线的树. (以红色显示为被调用的组件)

Here is the tree of my route. (in red the component called)

和我的路线代码:

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

and menuItem is:

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: ''
}]

您知道我的问题是什么吗?

Do you know what can be my problem?

我尝试过:

绝对路线.即:

 path: '/home/dashboard'

与

<a [routerLink]="menuItem.path">

和

<a [routerLink]="[menuItem.path]">

结果是一样的.无法正常工作.

And the result is the same. Not working.

添加:

[routerLinkActiveOptions] ="{exact:true}"发送给:

[routerLinkActiveOptions]="{exact: true}" to:

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">

无法解决问题.

扩展名Augury告诉我，routerLink对于正确的路由是正确的.但是该类未在DOM中激活.

The extension Augury says me that routerLink is true for the good route. But the class isn't activated in the DOM.

所以，我做了一些探索.

So, I have done some exploration.

我发现，如果我将menuComponent(侧栏)放在父根中，那是可行的，那么我会显示活动类(但是我不想将其放在父类中 )

I have found that if I put my menuComponent (sidebar) in the parent root, that is working, I the active class is displayed (But I don't want to put it in the parent)

我已经把情况弄得一团糟了……而那团子却起作用了……我不明白.

I have done a plunker of the situation... And the plunker works... I dont get it.

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

推荐答案

所以我在这个问题上花了很多时间.

So I have spend lot of time on this problem.

https://github.com/angular/angular/issues/19167

问题是:它适用于角度2，但不适用于角度4.

The thing is: That works with angular 2 but not angular 4.

我发现了针对角度4的黑客:

I have found a hack for 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"

编辑角度5:

使用Angular 5，该错误消失了！

With Angular 5, the bug is gone!

这篇关于角度2/4-routerLinkActive无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！