保持按钮状态，直到在Angular 9中解决了诺言

Question

我认为，Web应用程序的缺点在于，它们对用户感到“伪造”，在某种意义上，当单击按钮时，Web应用程序并没有真正给人以某种感觉。这是因为该操作通常是异步运行的，并且可以多次按下按钮，除非实现了一些叠加（有点难看）。

我的目标是设计一种方法来将按钮保持为“按下”状态，直到底层异步操作被解析（或拒绝）为止，基本上让按钮组件等待操作完成。大多数情况下，这也是普通桌面应用程序中发生的情况。

想法是将其实现为指令或拦截click()事件的东西（或诸如onClick()之类的自定义事件），如果被调用的方法返回了promise，那么请等待，直到该promise得以解决为止。按钮可以再次使用。

<button (click)="hello()">Hello</button>

async hello(): Promise<void> {
  // Do stuff...

  return Promise.resolve();
}

为了使思路更清晰，通常会发生这种情况：

User action:             hover    click     release
Button state:    normal  :hover   :active   normal
Triggers:                         hello()                resolve()

以及我的目标是：

User action:             hover    click     release
Button state:    normal  :hover   :active             -> normal
Triggers:                         hello()                resolve()

感谢您的任何帮助，谢谢。

Answer 1

我最初创建了一个hacky解决方案，当函数引用注入的参数时出现了问题，然后我找到了正是我所需要的示例：

angular-async-await-click

希望它对其他人有用。