Angular：具有多种可能操作的按钮答案

【问题标题】：Angular: button with multiple possible actionsAngular：具有多种可能操作的按钮
【发布时间】：2020-12-30 01:00:00
【问题描述】：

我有一个项目，我可以对它执行多项操作（编辑、删除、复制、升级……）。根据项目的状态，始终只能执行一项操作。

所以我想在 Angular 中创建一个按钮组件以显示在项目页面上，并根据我想要的状态：

在按钮上显示特定文本（编辑、删除、复制……）
执行特定操作

此用例的最佳设计是什么（知道未来场景/操作的数量可能会增加）？

1 个带有“onClick”功能的按钮组件，用于确定要执行的操作？
每个可能的操作的按钮组件并根据状态显示/隐藏？
有更好的想法吗？

【问题讨论】：

标签： angular components

【解决方案1】：

我认为最简洁的方法是创建一个具有 @Input() State: string; 属性的简单组件来接收简单状态。（如上所述）

然后使用您可能的对象创建一个 const 并从中选择文本、css 样式和函数等属性。

const possibilities = {
  Edit: {
    Text: "Edit",
    Color: "Orange",
    Function: this.edit
  },
  Add: { ... }
}

然后简单地通过 state可能性[state].color 访问对象或编写自己的 getter 函数。

然后你有一个简单的组件来管理所有的东西，你只需要提供一个状态。

也许考虑在提供错误状态时该怎么做；）

【讨论】：

【解决方案2】：

根据问题中指定的详细信息，解决此问题的一种方法是创建一个带有status 输入的组件。

然后，根据你的组件模板的复杂程度，你可以设置属性值（例如label属性），以及组件类中的目标动作，例如：

ngOnInit() {
  switch(status) {
    case 'Open':
      this.label = 'Edit'
    ...
  }
}
...
onButtonClick() {
  switch(status) {
    case 'Open':
      this.action.emit('edit');
    ...
  }
}

如果您有一个基于状态的具有复杂外观和感觉的更精美的按钮，您也可以在组件的模板中使用 ngSwtichCase 指令，如本文档中所示：https://angular.io/guide/built-in-directives#the-ngswitch-directives

<div [ngSwitch]="status">
  <div *ngSwitchCase="'Open'">..</div>
  <div *ngSwitchCase="'Closed'">..</div>
  ...
</div>

另外，请查看this Material Button component's API 以获取参考。

考虑到状态的数量可以增加，但仍会受到限制，您可以使用这种方法实现高度可定制的按钮，同时遵循 Angular 最佳实践。

当涉及到操作时，您可以简单地发出一个事件，并让父组件执行必要的操作（例如调用服务方法等）。

这样您的按钮组件将保持“哑”组件。

【讨论】：