Angular 个包含数据的模板

Question

父组件将 2 个模板和数据传递给子组件。在子组件中只显示没有数据的模板。如何显示传递给它的数据的模板？

父组件文件：

export class ParentComponent {
  parentdata: string = 'String from parent with data';
  constructor() { }
}

父html/template文件：

<app-child2
  [templateHeader]="list"
  [templateContent]="detail"
  [datafromparent]="parentdata">
</app-child2>

<ng-template #detail>
  Some data passed to it from outside
</ng-template>

<ng-template #list let-data="datafromparent">
  {{data}}
</ng-template>

子组件是：是的，将删除 ts-ignore ;-)

export class Child2Component {
  // @ts-ignore
  @Input() templateHeader: TemplateRef<any> | null;
  // @ts-ignore
  @Input() templateContent: TemplateRef<any> | null;
  @Input() datafromparent: string | undefined;
  constructor() { }
}

子 html/template 文件是：

<div class="header-css-class">
  <ng-container
    *ngTemplateOutlet="templateHeader; context: { data: datafromparent }">
  </ng-container>
</div>
<div class="content-css-class">
  <ng-container
    *ngTemplateOutlet="templateContent">
  </ng-container>
</div>

我希望你能帮我解决这个问题，因为它对解决许多（通用）问题很有指导意义。

Answer 1

使用传递给模板的上下文中的数据项的名称（为清楚起见，我将名称从 data 更改为 datafromcontext）：

// in the child template
<ng-container
   *ngTemplateOutlet="templateHeader; context: { datafromcontext: datafromparent }">
</ng-container>

// in the parent template
<ng-template #list let-data="datafromcontext">
  {{data}}
</ng-template>

Angular 个包含数据的模板

Angular templates with data

angular