Question

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

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

，如何删除true属性？

Answer 1

仅当routerLinkActive的值设置为false（非真值）时，模板代码下方才会将属性routerLinkActiveIsDisabled添加到其对应的标记中

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

或

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

Answer 2

你可以用

<a [routerLink]="routeUrl" 
[routerLinkActive]="{{classname if link is active}}" 
>
</a>

或使用* ngIf并且有两种不同的＆＃34; a＆＃34;标签

<a *ngIf="!routerLinkActiveIsDisabled"
[routerLink]="routeUrl" 
routerLinkActive="active-link" 
>
</a>

<a *ngIf="routerLinkActiveIsDisabled"
[routerLink]="routeUrl" 
>
</a>

有条件地禁用RouterLinkActive属性到某个值

2 个答案: