Angular 7动态内容投影

Question

我需要能够根据动态数据告诉一个Angular组件去渲染另一个Angular组件。我认为这需要内容投影，但我只能在简单的情况下让内容投影起作用。

示例场景

我有以下纯TypeScript表格数据：

const headings = [
  { id: 'cat', label: 'Cat' },
  { id: 'nameIt', label: 'Type the name' }
]

const data = [
  { cat: 'Tabby', nameIt: (name) => updateTabbysName(name) },
  { cat: 'Ginger', nameIt: (name) => updateGingersName(name) },
]

我还有四个Angular组件：

• simple-span用于在span中呈现文本。在这种情况下，它将呈现cat字段。
• text-input用于呈现文本输入。在这种情况下，它将呈现一个基本的HTML输入框，当用户输入文本时，它将调用nameIt回调函数。
• my-special-cat-table将提供headings和data变量，并且允许了解text-input和simple-span
• generic-table负责呈现表格DOM元素。它不知道text-input或simple-span的存在。

目标是让generic-table完全独立于单元格渲染组件

在Angular 7中是否可以实现？

- Tom Riglar

---

简短的答案是不。 - Randy Casburn

现在，没有百分之百通用的解决方案。 - user4470482

我认为你正在寻求一些 ngx-datatable 和 Angular Material Data Table 已经实现的功能。 - HirenParekh

对于任何对我接下来的步骤感兴趣的人...我们最终转向了React。根本区别在于，React通过整个组件树都是JavaScript，而Angular在每个组件之间有一个模板语言层。这意味着在React中向下传递未知/动态组件是微不足道的，而在Angular中目前还不可能。或者至少没有通用的方法。 - Tom Riglar

Answer 1

有一个*ngComponentOutlet指令用于声明式动态组件： https://angular.io/api/common/NgComponentOutlet

请记住，您需要将它们全部放在entryComponents中，以便注入器知道它们和它们的工厂。如果您发布更多代码，我们可以尝试找出确切的解决方案。

基本上，它的作用是解析工厂，然后使用注入器创建它并添加到视图中：

    const componentFactory = this.componentFactoryResolver
        .resolveComponentFactory(component);

    this.componentRef = this.viewContainerRef.createComponent(componentFactory);

你可以使用类似的想法编写自己的抽象，并使其与任何组件一起工作。奇怪的是，这里的人们说现在这是不可能的。

- waterplea

Answer 2

你想要实现的是在循环中使用内容投影。以下是 Angular Material 的示例：

…
<ng-container *ngFor=”let column of displayedColumns” matColumnDef=”{{column.id}}”>
   <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.name}}</th>
   <td mat-cell *matCellDef=”let row”>
      {{row[column.id]}}
   </td>
</ng-container>
…

正如您所看到的使用代码一样，您可以创建多个模板，并以任何您想要的方式组合它们：

<my-component …
[itemTemplate]=”itemTemplate”>
   <ng-template let-item #itemTemplate>
      column id: {{item.column.id}}
      value: {{item.value}}
   </ng-template>
</my-component>

来源

- Tom Smykowski

Answer 3

您可以考虑使用NgTemplateOutlet创建可重用组件。这只是一个建议。

看一下这个例子。

- Chandana