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>

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

我该怎么办？我不能用其他方式设置加号的样式，只能使用routerLinkActive（在我的真实项目中，一切都更加复杂）。