时间戳

首页 > 解决方案 > 禁用 Angular 2+ 中的链接

javascript - 禁用 Angular 2+ 中的链接

问题描述

我正在尝试禁用链接，直到在 Angular 6 中进行 API 调用。我希望在返回 getSelectedDealer() API 之前禁用链接。

 <menu-link *ngIf="perms.has(perms.TOP_OFFERS) && _dealerPersistenceService.getSelectedDealer()"
           route="/dynamic-journeys/{{getDealerId()}}/vehicles">
    <menu-item><img src="/assets/menu-icons/top-offers.svg">Dynamic Journeys</menu-item>
</menu-link>

这是'a'标签组件和CSS的代码。

<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null">
<ng-content select="menu-item"></ng-content>


a.disabled {
    pointer-events: none;
    cursor: default;
}

基本上我需要在 API 调用之前禁用“菜单链接”项目，然后再启用。

标签： javascripthtmlcssangular

解决方案

如果你想使用任何东西，你可以通过简单地将点击事件添加到这个链接来实现这一点：

<a [routerLink]="route"
   routerLinkActive="active"
   class="menu-link"
   [class.disabled]="disabled ? true: null"
   (click)="check($event)">

在 TS 中：

isReady = false;
check = (event) => {
 if (!this.isReady) {
   event.preventDefault();
 }
}

所以 isReady 是你组件的一个布尔变量，在你想要之前它是假的。当你点击这个链接时，它会检查它是否为真，但如果它是假的，它将阻止事件的原始行为，并且什么都不会触发。

推荐阅读