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