如何解决有条件地禁用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
的值并应用某些样式
模板
<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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。