主页 / coding / 问题 / 78315505
Accepted
Konrad Viltersten
Asked: 2024-04-12 18:01:13 +0800 CST

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

  • 772

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

家长。​

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

html

1 个回答

  1. Best Answer

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

    <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>

    注意，我真的不太喜欢，因为你强迫知道孩子的属性

    • 2

相关问题