Deaktivierungs RouterLinkActive Attribut bedingt auf einen Wert

Question

In diesem einfachen Menüpunkt-Komponente:

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

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

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

Ich würde routerLinkActive gerne auf nur bestimmte Elemente verwendet werden, nicht alle.

Wie kann ich es so machen, dass das routerLinkActive Attribut entfernt, wenn routerLinkActiveIsDisabledtrue

ist, wird

Answer 1

Im Folgenden Template-Code das Attribut hinzufügen routerLinkActive zu ihm nur Tag entspricht, wenn der Wert von routerLinkActiveIsDisabled auf false gesetzt ist (nicht truthy Wert).

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

oder

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

Answer 2

kann u

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

verwenden oder * ngIf verwenden und zwei "a" Tags

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

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