Angular:将模板传递给子组件的最佳/推荐方式

Question

我想知道最好或推荐的方法是将模板传递给子组件。据我所知，基本上有 3 种方法可以做到这一点:

选项1

parent.html

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

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

child.ts

@Input() public stuff: TemplateRef<any>;

child.html

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

选项 2

parent.html

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

child.ts

@ContentChild(TemplateRef) layoutTemplate: TemplateRef<any>;

child.html

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

选项 3

parent.html

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

child.ts

// nothing required

child.html

<ng-content></ng-content>

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

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

是否已经在某处给出了一些文档或建议？您在搜索“如何将模板传递给子项”时找到的示例似乎更可能使用选项 2。但为什么呢？我猜这是因为他们倾向于展示案例示例，其中模板不仅用于将其传递给子级，而且还用于父级本身。

谢谢!

Answer 1

一如既往，不同的东西用不同的工具

内容投影

在 html 代码适合内联的情况下，使用内容投影 ( ng-content )。考虑特定库中的自定义下拉列表或某种选项卡解决方案。如果您有以下内容，它会使代码变得不优雅且可读性降低:

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

想象一下，在一个复杂的 html 中，以及在 html 的末尾或开头声明的模板。

出于这个原因，内容投影主要用于库中(它可以像往常一样用作 html)，并且当内容没有条件时(进一步解释)。

很长一段时间，这也是唯一的选择。

模板 socket

第一个和第二个解决方案几乎相同。您正在使用 ngTemplateOutlet .这几乎适用于任何其他用途，并且是首选，尤其是当您有隐藏/取消隐藏内容的特殊情况时。

事实是，即使在 ngIf 中，ng-content 也将始终创建子组件。并与 parent 一起销毁它。所以最好使用 ngTemplateOutlet
Check this article here for more information

内容子项
@ContentChild将查询 dom 以获取第一个本地内容、指令等。它用于查询元素，因此，我希望它会影响性能(但允许您在输入不够时使用)。

再说一次，您无法使用正在搜索的任何指令查询 dom 以获取第一个元素。

一个用法示例是，如果您在组件中有一个地方，您希望在列表中显示 dom 的突出显示(其中突出显示指令)项目。那么你可以使用 @ContentChildren得到他们。