在Angular中，模板是将组件的数据渲染成HTML页面的关键。当组件的数据状态变化时，模板也应该立即更新。 ng-template和ng-container是Angular框架中很强大的模板引用工具，使用它们可以快速且简单地实现组件逻辑的扩展，是Angular开发中非常有用的工具。
ng-template 用法
ng-template是Angular中最基础的模板引用，可以让你把组件中的一部分代码作为独立的可重用的代码块进行定义，这样就能在不同的位置多次复用。
ng-template 语法
使用 ng-template 定义一个模板。
<ng-template #myTemplate> <h1>Hello World!</h1> </ng-template>
ng-template 的使用
在组件中使用 ng-container 来调用模板。
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
使用ng-container标签包裹模板，然后用 *ngTemplateOutlet 属性把模板传递给我们的组件。 在这里，myTemplate 就是我们定义的模板名称。
ng-container 可以代替一些无意义标签的占位符：
-- -------------------- ---- -------
------------ ------------
----
----------------------
-----------------------
-----
--------------
-------
-------
--- ----------- ---- -- ------
--------------
--------------------------
---------------------- ------
------
--------
--------在这个例子中，我们用 ng-template 声明了一个 <tr> 的模板 myTemplate 。 然后，我们将它传递给了一个指令 insert-element。 insert-element 指令被定义为一个结构性指令，用来在相应的位置插入我们的模板，同时传递一个 item 数据作为隐含的参数。
ng-container 用法
ng-container 可以在一个结构性指令中方便地使用，也可以用来包含多个元素，而这些元素没有任何的祖先，父级或子级关系。
ng-container 语法
下面是 ng-container 的语法：
<ng-container></ng-container>
ng-container 的使用
在Angular开发中，我们往往需要使用 ng-container 来对数据进行过滤、引用等操作。
例子：通过 ng-container 过滤数据
<div *ngFor="let item of items">
<ng-container *ngIf="item.value > 10">
<span> {{ item.value }} </span>
</ng-container>
</div>这段代码使用了 ng-container 来过滤 items 列表中 value 值大于10的元素，并且在过滤后使用span标签来展示数据。
例子：通过 ng-container 插入模板
<ng-container *ngTemplateOutlet="myTemplate"></ng-container> <ng-template #myTemplate> <h1>Hello World!</h1> </ng-template>
这段代码使用了 ng-container 来在组件中渲染模板和HTML元素，同时避免产生不必要的标签，在此例子中myTemplate被渲染在组件中。
总结
ng-template 和 ng-container 是 Angular 组件开发中非常有用的两个工具。使用 ng-template 可以将组件逻辑扩展为一个可重用的代码块，避免重复编写代码；使用 ng-container 可以对数据进行过滤、引用等处理，同时也可以在组件中渲染模板。 在实际开发中，合理运用这两个工具，可以极大地提高开发效率，减少代码冗余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7d0ca48841e9894468055