在 Angular 的属性指令中设置 href答案

【问题标题】：Set href in attribute directive in Angular在 Angular 的属性指令中设置 href
【发布时间】：2016-06-21 15:23:53
【问题描述】：

我正在尝试使用 Angular 2 设置 Bootstrap 选项卡条。我在 ngFor 中呈现选项卡，但是当我尝试将 # 放在 href 前面时出现模板错误表达。所以这个模板编译但不是我想要的：

<ul class="nav nav-tabs" role="tablist">
  <li *ngFor="let aType of resourceTypes; let i = index"
      [ngClass]="{'active': i == 0}"
      role="presentation">
    <a [attr.href]="aType.Name"
       [attr.aria-controls]="aType.Name"
       role="tab"
       data-toggle="tab">
      {{aType.Name}}
    </a>
  </li>
</ul>

我想做的是[attr.href]="#aType.Name" 但这爆炸了。在属性指令的表达式前面添加# 的正确语法是什么？

【问题讨论】：

标签： angular

【解决方案1】：

不需要前缀#

在这段代码中

<ul class="nav nav-tabs" role="tablist">
  <li *ngFor="let aType of resourceTypes; let i = index"
      [ngClass]="{'active': i == 0}"
      role="presentation">
    <a [attr.href]="aType.Name"
       [attr.aria-controls]="aType.Name"
       role="tab"
       data-toggle="tab">
      {{aType.Name}}
    </a>
  </li>

aType 已经引用了*ngFor 变量。

如果你想在 # 前面加上前缀，你可以使用

[attr.href]="'#' + aType.Name"

如果元素实际上具有属性href（<a> 就是这种情况），则也不需要attr.。

【讨论】：

使用[attr.href] 与[href] 时的一个区别是，如果值为null，前者将不会绑定-这对我来说很方便，因为我希望在使用url时禁用锚我绑定的属性没有设置。
它给了我这样的链接。 “本地主机：4200/mywebsite.com”。我该如何处理？
这有什么问题？期望值是多少？

【解决方案2】：

你可以用字符串插值来绑定它：

href = "#{{aType.Name}}"

（注意这里使用的属性是href，而不是[attr.href]。）

【讨论】：

这对我不起作用：<a [attr.href]="{{address}}">
@chovy 你不应该混合属性和对象绑定。只需删除 address 周围的那些花括号。

【解决方案3】：

为什么不使用routerLink 而不是href？我认为，这会工作

<a routerLink="#{{ aType.Name }}">Name<a>

【讨论】：