使用ng-container与模板相比有哪些好处？

Question

在Angular中，我们可以这样做：

template: `<ng-container #c></ng-container>`

或者：

template: `<template #c></template>`

创建一个视图容器，在模板渲染时隐藏它。

使用ng-container和html模板的替代方案有什么区别吗？我猜想Angular必须有自己的模板容器，如ng-template或ng-container，因为使用原始的html模板元素可能会破坏非基于浏览器的运行时，例如移动客户端等。

- Ole

---

谁将这个问题标记为主观性问题？它并不是。它们之间存在差异。第一个区别是在Angular中，template HTML标签的等效物是ng-template而不是ng-container。并且ng-container和ng-template之间也有差异。 - quirimmo

@quirimmo，原帖中使用了“好处”一词，往往会吸引有意见的回答。因此我编辑了问题 :) - Reactgular

Answer 1

<ng-container> 会被渲染，但不代表一个DOM元素。它仍然附加在组件的视图上。

只有在明确请求时，<ng-template> 才会被渲染。

关于这个主题，这里有一个很好的参考：http://nataliesmith.ca/blog/2018-05-01-ngtemplate-ngcontainer-ngcontent/ 使用 <ng-template> 是最佳实践。而 <ng-container> 则用于将 DOM 元素进行分组，例如当您需要应用 *ngIf 到多个 <td> 元素时，因为您不能在 <td> 周围使用 <span>。

- Reactgular

---

如果您使用模板变量，例如<ng-template #test>，则会呈现ng-template。 - quirimmo

这就是我所说的“模板变量”。我认为即使你发布的链接也说明了同样的事情，在代码片段中有一个专门的示例。 - quirimmo

非常好的答案 - 谢谢！还有第三种类型的模板可以使用，那就是原始的HTML template元素。我假设如果使用它，可能会破坏Angular生成不同平台（本地移动等）视图的能力？ - Ole

@Ole，如果您希望<template>像普通的HTML元素一样工作，那么这将是一个问题。例如，如果您使用了一个使用<template>的第三方库，那么您无法阻止Angular使用它。因此，使用<ng-template>更好，因为Angular会将其从DOM中删除并替换为注释。 - Reactgular

@Ole <template #c> 会将 c 定义为 ElementRef，而 <ng-template #c> 则会将 c 定义为 TemplateRef。你不能将 ElementRef 传递给视图工厂方法，因为它们需要一个 TemplateRef。 - Reactgular