[英]How can I conditionally use either [href] or [routerLink] on an anchor?
[英]Conditionally apply either href or routerLink without *ngIf
我的 Angular 应用程序模板中有以下代码,但无法按预期工作:
<ng-container *ngFor="let item of items"">
<a class="link"
[attr.href]="item.url"
[routerLink]="item.routerLink"
rel="noopener noreferrer"
tabindex="-1"
>
{{item.label}}
</a>
<ng-container>
...
我在这里尝试做的是遍历项目数组并显示链接列表。 问题是该项目可以具有url
属性,也可以具有routerLink
。 根据项目具有的属性,我需要应用href
属性或routerLink
。
有没有办法在不使用 *ngIf 的情况下做到这一点,这会导致代码重复?
建议你把策略移到component.ts
<a (click)="navigateToLink(item)">
和
navigateToLink( item ){
if( item.routerLink ){
this.router.navigate([item.routerLink]);
}else if( item.url ){
this.windows.open(item.url);
}
}
尝试以下
<ng-container>
<a class="link"
[attr.href]="item.url ? item.url : ''"
[routerLink]="item.routerLink ? item.routerLink: ''"
rel="noopener noreferrer"
tabindex="-1"
>
{{item.label}}
</a>
<ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.