angular - 有条件地将RouterLinkActive属性禁用为某个值

在这个简单的菜单项组件中：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'nav-item',
  template: `
    <a [routerLink]="routeUrl"
    routerLinkActive="active-link"
    >
    </a>
  `
})

export class NavItemComponent {
  @Input() routerLinkActiveIsDisabled: boolean;
}

我希望routerLinkActive仅用于某些项目而不是全部项目。
如果routerLinkActive是routerLinkActiveIsDisabled

最佳答案

只有当routerLinkActive的值设置为false（非truthy值）时，下面的模板代码才会将属性routerLinkActiveIsDisabled添加到相应的标记中。

[attr.routerLinkActive]="routerLinkActiveIsDisabled ? null: active-link"

或

[attr.routerLinkActive]="routerLinkActiveIsDisabled ? null: 'active-link'"