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

Question

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

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

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

Answer 1

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

工作堆栈闪电战

模板

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

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

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

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

Answer 4

如果您使用的是 angular 材质，则可以使用 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 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;
}