Angular:具有多种可能操作的按钮

Question

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

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

1. 在按钮上显示特定文本(编辑、删除、复制…(
2. 执行特定操作

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

• 1个按钮组件，具有"onClick"功能，用于确定要执行的操作
• 每个可能操作的按钮组件，并根据状态显示/隐藏
• 有更好的主意吗

Answer 1

我认为最干净的方法是用@Input((State:string创建一个简单的组件属性以接收简单状态。(如上所述(

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

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

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

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

也许考虑一下当提供了错误的状态时该怎么办；(

Answer 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指令

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

此外，请参阅此材质按钮组件的API以供参考。

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

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

这样一来，您的按钮组件将保持"；愚蠢的"；组成部分