Question

我正在使用打字稿类创建菜单来实现我的菜单项操作。我正在尝试为需要一些时间的菜单操作添加加载程序，但遇到一个我不明白的问题。

这是我在单击菜单项时调用的通用方法。

public item: Item = { name: 'Execute Menu item 1', command: new FirstMenuItem() };

/** method called on every item click */
executeToolbarAction(item: Item) {
    this.menuService.setLoading(true);

    item.command.executeAction('click');

    this.menuService.setLoading(false);
}

我永远都看不到加载程序，因为代码直接跳到了我的executeAction调用旁边的行。有人可以向我解释吗？

我知道我可以像这样使用observable：

item.command.executeAction('click').subscribe(() => {
    this.menuService.setLoading(false);
});

但是我想了解为什么没有它就无法工作...

我提供了一个实时演示示例here。

预先感谢：）

Answer 1

由于setTimeout中的异步代码会在3秒钟后执行，因此您将需要等待executeAction方法的回叫，并且它不会等待。因此，使用rxjs的最佳方式是使用如下所示的observable-observer模式。

menu.component.ts

executeToolbarAction(item: Item) {
     this.menuService.setLoading(true);

     item.command.executeAction('click').subscribe( value => {

        //On Call back received hide loader
        this.menuService.setLoading(false);
    })
}

first-menu-item.ts

 public executeAction(context): Observable<boolean> {
    // create observable
    return new Observable((observer) => {

      // observable execution
      setTimeout( () => {
          observer.next(true)
      observer.complete()
      }, 3000);
    })

  }

同步方式：它等待每个操作完成，之后才执行下一个操作。

异步方式：它从不等待每个操作完成，而是仅在第一个GO中执行所有操作。结果可用后，将处理每个操作的结果。就您而言，this.menuService.setLoading(false);将不等待setTimeout()异步代码块。

Here is forked solution

希望这会有所帮助！

具有纯打字稿类实例化的同步角度代码

1 个答案: