有条件地禁用 Angular 中的 <a> 标签

Question

我正在尝试禁用 Angular 模板中的 link。可能会问一个不可能的问题。有没有可能做这样的事情？

<a [routerLink]="['/details', item.id]" [disable]="disable">
    <div class="row">
        <div class="col-12">
        <h4>text text text</h4>  
        </div>
    </div>
</a>

当 link 被禁用时，我希望它的行为 <a> 标签就像一个普通的 <div>。

Answer 1

我会试着给你一个想法。
我们可以做这样的事情吗？

<div *ngIf="condition; else elseBlock">
    <div class="row">
      <div class="col-12">
        <h4>text text text</h4>  
      </div>
    </div>
</div>
<ng-template #elseBlock>
<a [routerLink]="['/details', item.id]">
    <div class="row">
      <div class="col-12">
        <h4>text text text</h4>  
      </div>
    </div>
</a>
</ng-template>

Answer 2

如果你的 a-tag 的内容那么复杂，那么只需将其外包到它自己的组件中或放入 ng-template，这样你就可以将它放入 a-tag 和 div 而不是一团糟。我认为有条件地用 div 替换 a-tag 是不可能的。

Answer 3

如果你正在使用angular material，你可以使用mat-button属性和ngClass来实现这个

<a mat-button href="https://www.google.com/" target="_blank" disabled="{{isDisabled}}"
    [ngClass]="{'simple-text': isDisabled}">
    Sample link
</a>

css

.simple-text {
  color: black !important;
}

stackblitz 演示：https://stackblitz.com/edit/angular-hkmkn9?file=src%2Fapp%2Fapp.component.css

Answer 4

试试下面的代码。根据条件更改 href 值并应用一些样式

工作stackblitz

模板

<a [routerLink]="disable ? null : ['/details', 1]" [ngClass]="{'anchor-disable' : disable}">
  <div class="row">
    <div class="col-12">
      <h4>text text text</h4>
    </div>
  </div>
</a>

CSS

a.anchor-disable {
  color: black;
  cursor: text;
  pointer-events: none;
  text-decoration: none;
}

Answer 5

你可以这样写：

<a [routerLink]="disable ? null : ['/details', item.id]" [class.disabled]="disable">
    <div class="row">
        <div class="col-12">
        <h4>text text text</h4>  
        </div>
    </div>
</a>

.disabled {
    pointer-events: none;
}

有条件地禁用 Angular 中的 <a> 标签

Disable <a> tag in Angular conditionally

html

angular

angular9