Angular 7动态内容投影

Question

我需要能够告诉一个角度以基于动态数据渲染另一个角度组件。我认为这需要内容投影，但是我只能在简单的情况下使内容投影起作用。

示例方案

我在香草打字稿中有下表数据：

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) },
]

我也有四个角组件：

• simple-span在跨度中呈现文本。在这种情况下，它将渲染猫场。
• 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中实现这一目标？

Answer 1

有 *ngComponentOutlet指令用于声明性动态组件：https://angular.io/api/common/ngcomponentOutlet

请记住，您需要将它们全部放在entryComponents中，以便对喷油器了解它们及其工厂。如果您发布更多代码，我们可以尝试找出确切的解决方案。

基本上，它要做的是解决工厂，然后用喷油器创建它，并添加到视图中：

    const componentFactory = this.componentFactoryResolver
        .resolveComponentFactory(component);
    this.componentRef = this.viewContainerRef.createComponent(componentFactory);

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

Answer 2

您可以评估使用ngtemplateoutlet创建可重复使用的组件。只是一个建议。

看这个示例。

Answer 3

您要提取的是在循环中使用内容投影。这是角材料的一个示例：

…
<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>

源