Question

我要在单击时禁用选定的项目菜单，直到没有响应为止。我想知道是否有通用的方法可以做到这一点。

例如

<ng-template [ngIf]="item.hasSidebar">
      <li [hidden]="itemHidden(item.keyPage) || !item.visible" class="nav-item">
        <a class="nav-link" (click)="reloadSidebar(item)" style="cursor: pointer">
            <i class="nav-icon {{item.icon}}"></i> {{item.name | translate}} <i class="nav-change-sidebar fa fa-angle-right"></i>
            <span *ngIf="item.badge" [ngClass]="'badge badge-' + item.badge.variant">{{ item.badge.text }}</span>
        </a>
      </li>
    </ng-template>

每个服务的响应都在组件内部，我从菜单组件中看不到内部响应。

Answer 1

您必须在组件或模板可访问服务中添加指示器标记，并将[disabled]绑定到该标记，例如

<a class="nav-link" [disabled]="inProgress" (click)="reloadSidebar(item)" style="cursor: pointer">

和组件

inProgress:bool;

reloadSidebar(item){
   inProgress=true;

   ....do the work

   inProgress=false; //probably in async  callback, upon result return

}

Answer 2

最简单的方法是添加一个变量state（例如），该变量可以有2种或3种类型（取决于您的需求）：ready，loading和{ {1}}。

开始时finish的值为state，当您调用函数时，将其传递给ready，然后在函数结束时，您将通过loading。

示例：

example.ts

finish

example.html

state: 'ready' | 'loading' | 'finish' = 'ready';
…
myFunction(item: any) {
  this.state = 'ready';
  this.myService.anOtherFunction(item).subscribe(() => {
    this.state = 'loading';
    console.log('it is loading time !);
  }
  this.state = 'finish';
  console.log('finished !);
}

禁用的菜单导航项

2 个答案: