angular - Angular：一个共享表组件，添加了从父组件传递的内联按钮

Question

我被卡住了，但很确定我在做什么是可能的。

场景：我制作了一个 common-table.component.ts，其中包含一个 mat-table（Angular Material Table）来显示数据。
现在我需要以非常通用/动态的方式从父级添加按钮（带有事件）。子组件将需要更新按钮上的属性或参数以使其特定于该行。

场景示例：

1. 带有用户表的“用户”页面（该表是子组件。）
2. 现在我们要添加内联按钮来执行自定义操作，例如（编辑/转到详细信息/删除）。
3. 随着行的呈现，每个按钮都是为该行定制的
          Template-Html: <button type="button" (click)="removeUser( row.id )">Edit
4. 这是上述
   https://stackblitz.com/edit/angular-datatable-responsive-mhbdfn?file=src%2Fapp%2Fviews%2Fshared-table%2Fshared-table.component.html的快速示例

到目前为止的想法涉及传入
CustomElement 有一个字符串 html-template 与要匹配的事件
或使用 Renderer2-Element 来更改 DOM？

渲染器 2 示例。
https://stackblitz.com/edit/angular-gnyd4e?file=src%2Fapp%2Fapp.component.ts
或
另一种方法是提供 ID 并在父级中使用 addEventListener()

但我愿意接受有关最佳方法的建议或想法？

标签： angulartypescriptangular-materialangular-componentsangular-event-emitter

Answer 1

您可以像这样在每一行上添加一个按钮菜单

请参阅此处的示例