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

问题描述

我正在尝试禁用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>一样。

解决方法

尝试以下代码。根据条件更改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;
}

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

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

如果您的a-tag内容是如此复杂，则只需将其外包到其自己的组件或ng-template中，这样您就可以将其放入a-tag和div中而不会造成很大的混乱。我不认为有可能像您希望的那样用div替换a-tag。

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

您可以这样写：

<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 angular9 html