html - 将 ng-content 模板化为数据列表的操作

Question

我的组件呈现一个数据列表。如果将数据列表作为操作，它们将是组件内容的一部分：

<my-component>
  <a (click)="eventA($event)">[Hi]</a>
  <a (click)="eventB($event)">[Hello]</a>
</my-component>

我的想法是将项目作为我的数据列表每一行的模板：

Name          | Date            | Actions
Foo           | 1/1/21          | [Hi] [Hello]
Foo           | 1/1/21          | [Hi] [Hello]
Foo           | 1/1/21          | [Hi] [Hello]

我最初通过执行以下操作解决了这个问题：

<my-component [columns]="columns" [data]="data" [actions]="true">
  <div *appTransclude>
    <a> ....</a>
  </div>
</my-component>

在我的组件中说：

<ng-container ngTemplateOutlet="transcludeTemplate;context:{$implicit: element}"></ng-container>

其中元素是行。数据。

@ContentChild(TranscludeDirective, {read: TemplateRef, static: true}) transcludeTemplate;

这很好用。它消除了我需要的一切，并且运行良好，但不是很好。我想多看一下内容，而不是使用 Wrapper div，我希望将 *appTransclude 添加到每个 Anchor 标记中。然后我可以做一些更好的事情，例如：如果超过 3 个，变成一个选择或下拉菜单以节省空间。

是否有更好的方法通过模板化 ng-content 并执行一些处理来完成此任务？为了不让用户感到困惑，我确实计划创建一个带有事件、标签和图标的动作组件，但我试图思考如何更好地处理这一切。

你有什么建议？我真正想到的唯一一件事就是根本不使用内容，而是以编程方式定义它并传入：

@Input() actions:{label:string, event:any, icon: string}[] = []
//---

<ng-template #actiontemplate>
  <a *ngFor="let action of actions" [matTooltip]="action.label" (click)="action.event($event)"><i class="{{action.icon}}"></i></a>
</ng-template>
<ng-container *ngTemplateOutlet="actiontemplate;context:{$implicit: element}"></ng-container>

标签： htmlangulartypescript