在 Angular 的屬性指令中設置 href

Question

我正在嘗試使用 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"但這[attr.href]="#aType.Name"了。 在屬性指令中的表達式前面添加#的正確語法是什么？

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

也不需要attr. 如果元素實際上具有屬性href ，這是<a>的情況。

Answer 2

那么你可以用字符串插值綁定它：

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

（請注意，這里使用的屬性是href ，而不是[attr.href] 。）

Answer 3

為什么不使用routerLink而不是href ？ 我認為，這會奏效

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