如何为Angular 11中的数据创建模板上下文

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

@Component({
  selector: 'app-child',
  template: `
    <div>{{ data }}</div>
  `,
})
export class ChildComponent {
  @Input() data: any;
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="myData"></app-child>
  `,
})
export class ParentComponent {
  myData: any = {
    name: 'John',
    age: 25,
  };
}

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

@Component({
  selector: 'app-child',
  template: `
    <ng-template [ngTemplateOutlet]="myTemplate" [ngTemplateOutletContext]="templateContext"></ng-template>
  `,
})
export class ChildComponent {
  @Input() data: any;

  myTemplate: any = `
    <div>Name: {{ name }}</div>
    <div>Age: {{ age }}</div>
  `;

  templateContext: any;

  ngOnChanges() {
    this.templateContext = {
      $implicit: this.data,
      name: this.data.name,
      age: this.data.age,
    };
  }
}