angular ngTemplateOutlet父子组件完整使用案例

个人感觉有点类似于vue的作用于插槽

以下是一个 Angular ngTemplateOutlet 父子组件完整使用案例：

假设我们有一个 parent 父组件和一个 child 子组件。我们想在父组件中动态地显示子组件，并将一些数据传递给子组件。

在子组件的模板中，我们定义了一个 ng-template，用于显示父组件传递给子组件的数据。然后使用 ng-container 和 ngTemplateOutlet 指令，将该模板插入到子组件模板中指定的位置。

ng-container 指定了要插入模板的位置，而 ngTemplateOutlet 指定了要插入的模板的名称。还可以通过 ngTemplateOutletContext 属性(context)向模板传递参数。例如：

子组件模板：

<ng-template #dataTemplate let-data>
  <div>
    <h2>{{data.title}}</h2>
    <p>{{data.description}}</p>
  </div>
</ng-template>

<div>
  <ng-container *ngTemplateOutlet="dataTemplate; context: {$implicit: data}"></ng-container>
</div>

在父组件的模板中，我们使用 <app-child> 元素引用子组件，并使用 ng-template 定义一个名为 dataTemplate 的模板，然后将该模板插入到子组件中指定的位置。

父组件模板：

<app-child>
  <ng-template #dataTemplate let-data>
    <div>
      <h2>{{data.title}}</h2>
      <p>{{data.description}}</p>
    </div>
  </ng-template>

</app-child>
或者父组件模板第二种方式：

<div>
  <ng-container *ngTemplateOutlet="dataTemplate"></ng-container>
</div>

<ng-template #dataTemplate>
  <app-child [data]="data"></app-child>
</ng-template>

 

在父组件类中，我们定义了一个 data 对象，用于存储要传递给子组件的数据。

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  data = {
    title: 'Title from Parent Component',
    description: 'Description from Parent Component'
  };
}