禁用 Angular 2+ 中的链接答案

【问题标题】：Disable a link in angular 2+禁用 Angular 2+ 中的链接
【发布时间】：2018-12-28 22:23:56
【问题描述】：

我正在尝试禁用链接，直到在 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 调用之前禁用“菜单链接”项目，然后再启用。

【问题讨论】：

<a [routerLink]="route" routerLinkActive="active" class="menu-link" [disabled]="apiReturned ? true : false " >。以apiReturned 作为组件属性？？
只需将disabled 标志默认设置为true。并在API 调用返回时将其重置为您想要的值。
默认情况下，“a”标签上不存在已禁用属性。我是否在底层“a”标签或菜单链接中将切换标志设置为禁用？
@LDB：对不起，没有意识到这是一个锚，即使我已经添加了一个答案，为什么你的方法不起作用？？
基本上我只是想禁用链接，直到 _dealerPersistenceService.getSelectedDealer() 返回。此方法在菜单链接组件中，而不是在底层的“a”标签中。我可以检查此方法是否已在底层“a”标记中调用并返回，还是将其放置在菜单链接中？

标签： javascript html css angular

【解决方案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 是你的组件的一个布尔变量，它是假的，直到你想要。当你点击这个链接时，它会检查它是否为真，如果它是假的，它会阻止事件的原始行为，并且什么都不会触发。

【讨论】：

【解决方案2】：

在你的组件中有一个标志，它告诉 API 是否已经返回......：

apiReturned = false;

ngOnInit() {

   setTimeout(() => {
      // simulating API call, sets to true after 5 seconds
      this.apiReturned = true;
   }, 5000);
}

让你的 HTML 像：

 <a [class.disabled]="apiReturned ? null: true"  [href]="apiReturned ? 'https://stackoverflow.com/users/9442497/ldb' : null" >Click Me!</a>

在这里，我还从anchor 中删除了应该禁用的href。

编辑

如果您的锚标记位于不同的组件中，那么您有两种方法来执行任务。

将 Route 和 API 的状态发送到 mat-link 组件并采取相应措施
拥有一个从父组件获取 API 状态值的服务，并在mat-link 组件中使用该服务的数据。我更喜欢使用服务，因为当 API 未返回时，您还必须阻止来自 URL 栏的路由，使用 Input 您只能阻止链接，但如果有人直接在 URL 中输入路由 url，这将无济于事酒吧。在这种情况下，您可以使用 Angular 的 Route Guard 来防止路由

我将解释第一种方式的用法，而将第二种方式留给您实现。

在您的mat-linkcomponent.ts 中，有类似的内容：

export class MatLinkComponent  {
  @Input() route: string;
  @Input() apiReturned: boolean;
}

在您的mat-link.component.html 中，有类似的内容：

<a *ngIf="!apiReturned" href="#" [class.disabled]="!apiReturned" >Click Me!</a>

<a *ngIf="apiReturned" [routerLink]="route" routerLinkActive="active" >Click Me!</a>

您可能会注意到我创建了两个有条件的anchor 标签，这是因为routerlink 不会接受null，而且我们还没有像条件routerLink 这样的东西。

在父组件中，比如app.component.html 或您使用mat-link.component 的任何地方，有类似的内容：

<mat-link 
      [apiReturned]=apiReturned
      [route]="'routinghere'">
</mat-link>

您可以在此处查看工作示例：Example。 Click Me! 链接将在 10 秒后激活..

【讨论】：

感谢您的回复。好的，我试过了。现在每个链接都被禁用，好像 apiReturned=false。调用的 api 是 _dealerPersistenceService.getSelectedDealer() ...正如您在我上面的代码中看到的那样，菜单链接在进行此调用之前是隐藏的。调用后如何切换到 apiReturned =true 'a' 标签？
无论您在哪里进行 API 调用，在这里说您将在 App 组件网中进行。因此，如果您的服务返回 Observable，您可以执行以下操作：@ 987654343@
API 调用不是可观察的
@LDB：然后呢？是承诺吗？还是您订阅了服务本身？
在 .ts 文件中为 menu-link 组件调用此方法。该方法看起来像这样 getDealerId() { return this._dealerPersistenceService.getSelectedDealer().id; } 。我不能在这里切换 apiReturned 属性吗？似乎我不能给子组件'a'标签上存在该属性

【解决方案3】：

Angular 需要一种选择性地应用指令的方法，但这是我的解决方案：

<a
    (click)="markAsRead(notification);notification.externalUrl || $event.preventDefault()"
    [href]="notification.externalUrl"
    target="_blank""
...>

【讨论】：