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

Question

在我看来，Web 应用程序的缺点是它们会给用户带来 "fake" 的感觉，即单击按钮时并不会真正给人一种正在发生某事的印象。这是因为该操作通常是运行异步的，并且可以多次按下按钮，除非实现了一些覆盖（有点丑陋）。

我的目标是设计一些方法来将按钮保持为 "pressed" 直到解决（或拒绝）底层异步操作，基本上让按钮组件等待操作完成。这也是大多数时候在普通桌面应用程序中发生的情况。

我们的想法是将其实现为指令或拦截 click() 事件（或像 onClick() 这样的自定义事件）的指令，如果被调用的方法 returns 是一个 promise , 然后等到 promise 被 resolve 使按钮再次可用。

<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

希望对其他人有用。

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

Holding a button state until a promise is resolved in Angular 9

asynchronous

user-experience

button

angular