Angular 2/4 - routerLinkActive无法正常工作

问题描述：

我的routerLinkActive出现问题。Angular 2/4 - 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 {}

和菜单项是：

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] = “{确切：真}” 来：

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

犯规解决该问题。

EDIT3：

扩展卜算说我routerLink是好航真。但该类未在DOM中激活。

EDIT4：

所以，我也做了一些探索。

我发现，如果我把我的MenuComponent中（边栏）在父根，也就是工作，我会显示活动类（但我不想把它的父）

EDIT5：

我已经做了的情况plunker ......而plunker工程...我不明白这一点。

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

开始=>

你能展示你如何配置你的路线？ – Kyrsberg

你可以尝试'[routerLink] =“[/ menuItem.path]”' –

尝试routerLink =“/ menuItem.path” – Debabrata

答

所以我对这个问题花费大量的时间。

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

的事情是：

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

与角2，但没有棱角4.

我已经找到了4角一劈工程

EDIT ANGULAR 5：

随着Angular 5，错误消失了！

不好意思，但你的答案只是一种解决方法。它与使routerLinkActive指令工作无关。 – tishma

@tishma这个“黑客”今天工作。但它仍然是一个黑客。 – Wandrille

答

试试这个：

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

已经尝试过，不工作，但谢谢 – Wandrille

答

貌似HomeComponent被延迟加载。您不必将您的路线移至根组件。试着将RouterModule添加到根组件。

更多here

感谢您的帮助，但不幸的是，这并没有改变结果。 – Wandrille

Angular 2/4 - routerLinkActive无法正常工作

相关推荐