代码之家 › 专栏 › 技术社区 › Nikita Marinosyan

有条件地应用不带*ngif的Href或RouterLink

angular-routerlink angular-routing angular

Nikita Marinosyan · 技术社区 · 6 年前

我的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 属性,或 路由链接 .

有没有办法在不使用导致代码重复的*ngif的情况下做到这一点?

2 回复 | 直到 6 年前

Wandrille 6 年前

我建议你把策略移到 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);
   }
}

Patricio Vargas 6 年前

试试下面的

 <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>

推荐文章

j-p · 角度5,使用子模块中的组件

7 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

7 年前

Matt Eland · 角度2+-我可以发出一个指令来使用路由器导航吗?

7 年前

Burst of Ice · 未找到直接浏览时的角度布线

7 年前

Wai Yan Hein · 子模块的角度5布线不工作

7 年前

Plochie · SVG模式在Safari中不起作用

7 年前

Sathya V · 路线导航时角度组件属性未重置

7 年前

Mujahid · 角度路由器中的Scrollspy效应

7 年前

Musical Coder · URL更改不以角度触发

7 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

7 年前