将 ControlValueAccessor 包装在另一个组件中

Question

对于一个副项目，我做了一个新的 ControlValueAccessor 实现(矩阵选择 AKA：一个可以在其中选择和取消选择单元格的表)。可以提供选项输入来更改矩阵在响应用户交互时的行为方式。

我正在尝试创建一个"示例"页面来列出几个具有各种选项集的矩阵选择控件(有点像这样：https://material.angular.io/components/datepicker/overview)。对于每个示例，我想显示绑定值 json，该值随着用户与控件和选项 json 交互而更新。

这很容易做到，但重复(我有比下面提供的更多的变化)：

<h1>Matrix Selection Component</h1>
<h2>Basic</h2>
<app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
<h3>Json</h3>
<pre>{{data|json}}</pre>
<h3>Options</h3>
<pre>{{options||json}}</pre>
<h2>With Labels</h2>
<app-matrix-selection [formControl]="peopleAttributesControl" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects"></app-matrix-selection>
<h3>Json</h3>
<pre>{{data|json}}</pre>
<h3>Options</h3>
<pre>{{options||json}}</pre>
...

请注意，对于每个示例，我都必须输出 json 和选项值。

在我的脑海中(可能是错误的)，我想做的是这样的：

<h1>Matrix Selection Component</h1>
<h2>Basic</h2>
<app-example>
<app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
</app-example>
<h2>With Labels</h2>
<app-example>
<app-matrix-selection [formControl]="peopleAttributesControl" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects"></app-matrix-selection>
</app-example>
...

并定义 AppExampleComponent，使其可以输出传入的任何组件的数据和选项(不仅是选择矩阵，还有我可能使用所述属性定义的任何其他内容)。

我正在努力寻找任何资源来帮助我实现这一目标，我认为这可能是因为我正在努力表达我想要实现的目标。我希望一个组件包装另一个组件，以便它可以向我显示与该组件交互的效果。

我想其他实现方式是选项 1：

<h1>Matrix Selection Component</h1>
<h2>Basic</h2>
<app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
<app-example [data]="peopleAttributes"></app-example>
<h2>With Labels</h2>
<app-matrix-selection [formControl]="peopleAttributesControl" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects"></app-matrix-selection>
<app-example [data]="peopleAttributes" [options]="withLabelsOptions"></app-example>
...

或选项 2：

<h1>Matrix Selection Component</h1>
<app-matrix-selection-example title="Basic" [data]="peopleAttributes"></app-matrix-selection-example>
<app-matrix-selection-example title = "With Labels" [data]="peopleAttributes" [keys]="people" [selectables]="subjects" firstCellValue="Students / Subjects" [data]="peopleAttributes" [options]="withLabelOptions"></app-matrix-selection>
...

但我真的不想为我创建的每个将来的 ControlValueAccessor 创建一个示例组件。

我觉得我在这里缺少Angular功能的关键部分。如果没有，你会如何处理这个问题？

Answer 1

解决方案一 - 使用 ng-content

我忘记了一个非常基本的概念——满足的孩子！以下链接有所帮助：https://medium.com/@tkssharma/understanding-viewchildren-viewchild-contentchildren-and-contentchild-b16c9e0358e

暂时忘记数据和选项要求，这将导致：

<app-example title="Basic">
<app-matrix-selection [formControl]="peopleAttributesControl"></app-matrix-selection>
</app-example>

然后，示例组件如下所示：

<h2>{{title}}</h2>
<ng-content></ng-content>

ng-content将使用元素标签定义的元素输出到屏幕。

解决方案二 - 动态组件加载器

需求的第二部分需要动态组件加载： https://angular.io/guide/dynamic-component-loader

将我的示例移动到服务后，我最终得到了以下模板：

<h1>Matrix Selection Component</h1>
<app-example *ngFor="let example of examples" [title]="example.title" [example]="example"></app-example>

干净多了！

示例对象的属性之一是 Angular 核心组件类型，可以在应用示例组件中使用 ComponentFactoryResolver 动态加载。按照上面 Angular.io 链接中的说明进行操作。

然后，示例组件的模板可以处理重复结构：

<h2>{{title}}</h2>
<ng-template appExample></ng-template>
<h3>Bound Data Json</h3>
<pre>{{ example.componentAttributes.data | json }}</pre>
<div *ngIf="example.componentAttributes.options">
<h3>Options Json</h3>
<pre>{{ example.componentAttributes.options | json }}</pre>
</div>

需要注意的是，我所有未来的组件都必须具有数据和选项属性，这些属性是通过实现接口强制执行的 - 但这对我的目的来说很好。