在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 调用之前禁用“菜单链接”项目，并在 API 调用后启用它们。

- LDB

---

默认情况下，只需将“disabled”标志设置为“true”。并在“API”调用返回时将其重置为所需值。 - Shardul

默认情况下，“a”标签上不存在“disabled”属性。我应该在底层的“a”标签或菜单链接上设置禁用的切换标志？ - LDB

@LDB：抱歉，我没有意识到它是一个锚点，尽管我已经添加了一个答案，但为什么你的方法不起作用呢？ - Ashish Ranjan

@LDB：您的anchor标签所在的组件，假设为anchorTag组件，它是menu-link组件的子组件吗？ - Ashish Ranjan

一会儿就会看到这个了。 - Ashish Ranjan

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是您组件的布尔变量，它在您想要之前为false。每当您点击此链接时，它将检查它是否为true，但如果它为false，它将阻止事件的原始行为，并且没有任何内容会触发。

- dAxx_

Answer 2

Angular需要一种有选择地应用指令的方式，这里是我的解决方案：

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

- Rusty Rob

Answer 3

在您的组件中，有一个标志表示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，因为它应该是被禁用的。

编辑

如果您的锚点标签位于不同的组件中，则有两种方法可以执行此任务。

1. 将路由和API的状态发送到mat-link组件，并根据情况采取行动
2. 拥有一个服务，从父组件中获取API状态的值，并在mat-link组件中使用服务的数据。我更喜欢使用服务，因为您还必须在API未返回时阻止URL栏中的路由，使用输入只能阻止链接，但如果有人直接在URL栏中输入路由URL，那将无济于事。您可以使用Angular的路由守卫来防止这种情况下的路由

我将解释第一种方式的用法，并留下第二种方式供您实现。

在您的mat-link组件.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>

您可以在此处查看一个实际示例：示例。10秒后，Click Me!链接将被激活。

- Ashish Ranjan

---

谢谢您的回复。好的，我尝试了这个方法。现在每个链接都被禁用了，就好像apiReturned=false一样。调用的API是_dealerPersistenceService.getSelectedDealer()...正如您在上面的代码中所看到的，直到进行此调用之前，菜单链接才会被隐藏。当调用完成后，我该如何切换到apiReturned=true的'a'标签呢？ - LDB

无论您在何处进行API调用，比如在App组件中进行调用... 因此，如果您的服务返回一个Observable，您可以这样做：_dealerPersistenceService.getSelectedDealer().subscribe((success)=>{// 检查成功后，设置this.apiReturned = true }) - Ashish Ranjan

API调用不是可观察对象。 - LDB

@LDB：那么呢？这是一个承诺吗？还是你正在订阅服务本身？ - Ashish Ranjan

这个方法被调用在菜单链接组件的 .ts 文件中。该方法看起来像这样 getDealerId() { return this._dealerPersistenceService.getSelectedDealer().id; } 。我可以不在这里切换 apiReturned 属性吗？似乎不行，因为该属性存在于子组件的“a”标签上。 - LDB

Answer 4

我认为根据您的需求，这是可以实现的。假设您正在使用组件，您可以创建一个服务对象。在您想要启用/禁用href的组件中使用它。否则，如上面的答案所述。如果您不想使用prevent default，您可以简单地返回false。

    check($event){
     return false;
    }

- Vinoth