Angular 角度：将模板传递给子组件的最佳/推荐方法

我想知道将模板传递给子组件的最佳或推荐方法是什么。据我所知，基本上有三种方法：

选择1 parent.html

<ng-template #mytemplate>
  <!-- some stuff -->
</ng-template>

<child [stuff]="myTemplate"></child>

<ng-container [ngTemplateOutlet]="stuff"></ng-container>

<child>
  <ng-template #mytemplate>
    <!-- some stuff -->
  </ng-template>
</child>

<ng-container *ngTemplateOutlet="layoutTemplate">
</ng-container>

<child>
  <!-- some stuff -> not ng-template around it! -->
</child>

<ng-content></ng-content>

child.html

<ng-template #mytemplate>
  <!-- some stuff -->
</ng-template>

<child [stuff]="myTemplate"></child>

<ng-container [ngTemplateOutlet]="stuff"></ng-container>

<child>
  <ng-template #mytemplate>
    <!-- some stuff -->
  </ng-template>
</child>

<ng-container *ngTemplateOutlet="layoutTemplate">
</ng-container>

<child>
  <!-- some stuff -> not ng-template around it! -->
</child>

<ng-content></ng-content>

我在文档中找不到任何关于“标准”方式的内容。 只是味道吗？对于其中一个，是否有使其成为默认方式的好处

当然，总会有一个或另一个更适合的用例。但我对上面的例子很感兴趣——所有这些都可以使用

是否已经在某个地方提供了一些文档或建议？您在搜索“如何将模板传递给子级”时找到的示例似乎更可能使用选项2。但是为什么呢？我猜这是因为他们倾向于展示这样的例子：模板不仅用于传递给孩子，还用于传递给家长本身

---

谢谢

一如既往，不同的工具适用于不同的事物

内容投影 在html代码需要内联的情况下，使用内容投影（ng content）。考虑特定的库中的自定义下拉或某种Tab解决方案。如果您有以下情况，则会使代码不美观，可读性降低：

<fantasy-tabs>
   <fantasy-tab [tabContent]="myTemplate">
   <fantasy-tab [tabContent]="myTemplate2">
   <fantasy-tab [tabContent]="myTemplate3">
</fantasy-tabs>

想象一下上面的情况，在一个复杂的html和在html末尾或开头声明的模板中

由于这个原因，内容投影主要用于库中（它可以像往常一样作为html使用），并且当内容不是有条件的时（进一步解释）

长期以来，这也是唯一的选择

模板出口 第一个和第二个解决方案基本相同。您正在使用

ngTemplateOutlet

。这几乎适用于任何其他用途，并且是首选，尤其是当您有隐藏/取消隐藏内容的特殊情况时

问题是ng内容始终会创建子组件，即使在

ngIf

中，也会与父组件一起销毁它。所以最好使用

ngTemplateOutlet

知足儿童

@ContentChild

将查询dom以获取本地内容、指令等的第一个。它用于查询元素，因此，我希望它会受到性能影响（但允许您在输入不足时使用）

同样，您不能使用正在搜索的任何指令查询dom以获取第一个元素

---

例如，如果您在组件中有一个位置，希望在列表中显示dom的高亮显示项（其中高亮显示了一条指令）。然后，您可以使用

@ContentChildren

获取所有内容。

对于我来说

rock如果子组件需要一个默认模板，或者重复模板，或者传递一些数据，则ng内容不合适。在这些情况下，选项2是您所需要的。就标记而言，它通常比选项1更优雅。但是，如果您想将模板传递给属性激活的指令，那么选项1非常有用。非常感谢您提供的非常详细的答案！对我来说，最有趣的是观点1和选择2之间的区别。据我所知，选项2可能比选项1更昂贵（就性能而言）？这意味着，如果没有其他原因（我目前无法想到，除了口味和可读性），选项1应该更可取，您同意吗？您是否有任何关于性能的参考资料？我尝试了前两个选项，因为我想看看性能损失有多大（因为我个人更喜欢选项2 tbh）。我非常愚蠢的示例几乎没有显示任何差异，相反，选项2使用更少的渲染和更少的脚本编写时间。对于测试，我创建了1000个组件，通过输入或“直接”将模板传递给它们。因为我觉得这种测试相当幼稚，我想问你是否知道其他更可靠的来源/测试？谢谢！：）