routerLinkActive无法添加类求助：报InvalidCharacterError错误

这个报错的原因很明确：你把两个类名合并成了一个带空格的字符串放进数组里，而DOM的DOMTokenList.add()方法不允许单个token包含空格——空格是类名的分隔符，每个类名必须作为独立的token存在。

修正方法 #

把数组里的复合类名字符串拆成两个独立的元素，每个类名单独占一项：

<nav class="class-bar">
  <ul class="class-bar__menu">
    <li class="class-bar__item">
      <a [routerLinkActive]="['demo_class', 'demo_class--active']" routerLink="/xyz">Item1</a>
    </li>
    <li class="class-bar__item">
      <a [routerLinkActive]="['demo_class', 'demo_class--active']" [routerLink]="['/abc']">Item2</a>
    </li>
  </ul>
</nav>

额外说明 #

• 如果只需要添加单个类名，你可以直接写字符串形式，比如routerLinkActive="demo_class"
• 多个类名必须以数组形式传递，且每个类名是数组的独立元素，不能用空格分隔合并成一个字符串

这样修改后，routerLinkActive就能正确匹配路由，为激活的链接同时添加demo_class和demo_class--active两个类了。

内容的提问来源于stack exchange，提问作者user8546638