angular - Angular：routerLinkActive 无法正常工作

Question

我有两个简单的页面：主页和关于。我还有一个菜单数组AppComponent：

menu = [
  {path: '', title: 'Home'},
  {path: 'about', title: 'About'}
];

款式：

.active {
  color: red;
}

.blue {
  color: blue;
}

并查看：

<ul>
  <li *ngFor="let item of menu" [routerLink]="item.path" routerLinkActive="active"
      [routerLinkActiveOptions]="{exact: true}">
    <span routerLinkActive="blue">+</span>{{item.title}}
  </li>
</ul>
<router-outlet></router-outlet>

当我导航到页面时，我希望链接变为红色，加号变为蓝色。但是当我在 About 页面上时，Home 链接的加号也是蓝色的：

我能做些什么？我不能以其他方式设置加号样式，只能使用routerLinkActive（在我的真实项目中，一切都要复杂得多）。

标签： angular