Question

我需要能够告诉一个角度分量基于动态数据渲染另一个角度分量。我认为这需要内容投影，但是我只能在简单的情况下才能进行内容投影。

示例场景

我在普通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会在一个跨度中呈现文本。在这种情况下，它将渲染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中实现吗？

Answer 1

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

Take a look at this example。

Answer 2

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

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

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

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

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

您可以编写具有类似想法的自己的抽象，并将其与所需的任何组件一起使用。奇怪的是这里的人们说现在不可能了。

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>

source

Angular 7动态内容投影

3 个答案: