如何将内容传递给子级，包括 Angular 中的可渲染部分？

Question

我有两个组件：父组件和子组件，具有以下标记。对于这个例子来说至关重要的是，子进程获取自己的数据来渲染，并且“它不能”由父进程提供。按照现在的设计，它按预期工作。

父母

。

<h1>I'm the papa</h1>
<app-lookup>
  <div>Some fixed content</div>
  <div>Some dynamic content (soon)</div>
</app-lookup>

孩子

。

<h1>I'm the sonny</h1>
<div *ngFor="let item of items">
  <span>{{item.name}}</span>
  <span>{{item.value}}</span>
</div>
<div>Total: {{items.count}}</div>
<ng-content></ng-content>

在这个阶段，我意识到我不知道如何将孩子内部的东西渲染为从父母传递的内容的一部分。在上面的示例中，显示了总数（当从订阅的 HTTP 请求重试时）。但我想通过将模板传递给孩子来控制它的呈现方式。

愿望，伪代码（自然不起作用，因为

items

不存在于父级中）就是这样。

<h1>I'm the papa</h1>
<app-lookup>
  <div>Some fixed content</div>
  <div>The cool total: {{items.count}}</div>
</app-lookup>

我不能使用

@Input/@Output

，因为我想将数据封装在子进程中。我发现了很多关于“子内容”和“数据交换”的博客。但我未能找到一个说明如何传递要使用子字段呈现的模板的模板。当然，父母需要猜测字段的名称。我对此很满意（如果这些不存在，我就什么也不显示。

您可以使用模板引用变量（我称为“数据”以使看起来更舒服）

<app-lookup #data>
  <div>Some fixed content</div>
  <!--see that you use data.any-property-of child -->
  <div>The cool total: {{data.items.count}}</div>
</app-lookup>

Answer 1