相关疑难解决方法(0)

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

我的routerLinkActive有问题.

这是两个GIF解释.

  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>
Run Code Online (Sandbox Code Playgroud)

这是我路线的树.(红色称为组件)

在此输入图像描述

和我的路线代码:

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: …
Run Code Online (Sandbox Code Playgroud)

routerlinkactive routerlink angular

19
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

routerlink ×1

routerlinkactive ×1