javascript - 禁用 Angular 2+ 中的链接

Question

我试图在 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 调用之前禁用“菜单链接”元素，然后再启用。

Answer 1

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

<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 是您的组件的一个 bool 变量，在您需要之前它是假的。当您单击此链接时，它会检查它是否为真，但如果为假，它将阻止事件的原始行为，并且不会触发任何内容。