上面示例中，我们在 section 标签上应用了 ngIf 指令，从而实现 section 标签内容的动态显示。这种方式有个问题是，我们必须添加额外的 DOM 元素。要解决该问题，我们可以使用 <ng-template> 的标准语法 (非*ngIf语法糖)：
<ng-template [ngIf]="show"> <div> <h2>Div one</h2> </div> <div> <h2>Div two</h2> </div> </ng-template>
问题是解决了但我们不再使用 * 语法糖语法，这样会导致我们代码的不统一。虽然解决了问题，但又带来了新问题。那我们还有其它的方案么？答案是有的，我们可以使用 ng-container 指令。
<ng-container>
<ng-container> 是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 comment 元素。使用 <ng-container> 的示例如下：
<ng-container *ngIf="show"> <div> <h2>Div one</h2> </div> <div> <h2>Div two</h2> </div> </ng-container>
有时我们需要根据 switch 语句，动态显示文本，这时我们需要添加一个额外的标签如 <span> ，具体示例如下：
<div [ngSwitch]="value"> <span *ngSwitchCase="0">Text one</span> <span *ngSwitchCase="1">Text two</span> </div>
针对这种情况，理论上我们是不需要添加额外的 <span> 标签，这时我们可以使用 ng-container 来解决这个问题：
<div [ngSwitch]="value"> <ng-container *ngSwitchCase="0">Text one</ng-container> <ng-container *ngSwitchCase="1">Text two</ng-container> </div>
介绍完 ng-container 指令，我们来分析一下它跟 ng-template 指令有什么区别？我们先看以下示例：
<ng-template> <p> In template, no attributes. </p> </ng-template> <ng-container> <p> In ng-container, no attributes. </p> </ng-container>
以上代码运行后，浏览器中输出结果是：
In ng-container, no attributes.
即 <ng-template> 中的内容不会显示。当在上面的模板中添加 ngIf 指令：
<template [ngIf]="true"> <p> ngIf with a template.</p> </template> <ng-container *ngIf="true"> <p> ngIf with an ng-container.</p> </ng-container>
以上代码运行后，浏览器中输出结果是：
ngIf with a template.
ngIf with an ng-container.
现在我们来总结一下 <ng-template> 和 <ng-container> 的区别：
<ng-template> ：使用 * 语法糖的结构指令，最终都会转换为 <ng-template> 或 <template> 模板指令，模板内的内容如果不进行处理，是不会在页面中显示的。
<ng-container>：是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 comment 元素，它可用于避免添加额外的元素来使用结构指令。
最后再来看一个 <ng-container> 的使用示例：
模板定义
<div> <ng-container *ngIf="true"> <h2>Title</h2> <div>Content</div> </ng-container> </div>
渲染结果
<div> <!--bindings={ "ng-reflect-ng-if": "true" }--><!----> <h2>Title</h2> <div>Content</div> </div>
TemplateRef 与 ViewContainerRef 有什么作用?
TemplateRef
用于表示内嵌的 template 模板元素，通过 TemplateRef 实例，我们可以方便创建内嵌视图(Embedded Views)，且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。
ViewContainerRef
用于表示一个视图容器，可添加一个或多个视图。通 ViewContainerRef 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。(本示例就是通过 ViewContainerRef 对象提供的 API来动态地创建组件视图)。
ViewChild 装饰器还支持哪些查询条件？
ViewChild 装饰器用于获取模板视图中的元素，它支持 Type 类型或 string 类型的选择器，同时支持设置 read 查询条件，以获取不同类型的实例。
export interface ViewChildDecorator { // Type类型：@ViewChild(ChildComponent) // string类型：@ViewChild('tpl', { read: ViewContainerRef }) (selector: Type<any>|Function|string, {read}?: {read?: any}): any; new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChild; }