Angular 角度2/4-RouterLink活动未正常工作

我的RouterLink Active有问题

这里有两个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>

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'

与

EDIT4:

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

所以，我做了一些探索

我发现，如果我将menuComponent（侧边栏）放在父根目录中，则会显示活动类（，但我不想将其放在父目录中）


EDIT5:

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

我已经把情况搞清楚了。。。而普朗克的作品。。。我不明白

试试这个：

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


家

看起来HomeComponent是延迟加载的。您不必将路由移动到根组件。只需尝试将RouterModule添加到根组件

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


问题是：这适用于角度2，但不适用于角度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>

编辑角度5:

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

有了Angular 5，虫子就不见了
 您可以展示一下您是如何配置路由的吗？您可以尝试一下
[routerLink]=“[/menuItem.path]”
试试routerLink=“/menuItem.path”我已经编辑了我的工作/menuItem.path不起作用。因为您正在将活动类应用于routerLink的祖先，所以列表项上可能需要
[routerLinkActiveOptions]=“{exact:true}”
。谢谢你的帮助，但不幸的是，这并没有改变结果。对不起，你的回答只是一个解决办法。它与RouterLink活动指令的工作无关。@tishma这个“黑客”现在正在工作。但这仍然是一个难题。@Wandrille你能告诉我，如果
elb
符合一些逻辑，我在哪里可以读到更多关于影响ela

课程的内容。（就像你的答案一样）我想看到更多这样的例子

#rla=“

那叫什么？@Omar#rla=”这是一个模板引用变量。看这里：在Angular 8上对我来说就像一个魔咒一样完美地在Angular 8上工作。

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