Angular模板指令：ng-template和ng-container的用法

<ng-container> 

为了避免创建额外的div,可以使用<ng-container>，它是一个分组元素，但它不会污染样式或元素布局，因为Angular压根不会把它放进DOM中，它更像是JavaScript中if块中的花括号。

ng-container用法

用法一（最基础的用法）

我们在一个列表循环里有写时候有一些判断要完成，我们知道angular的结构指令是不允许两个同时存在的，这个时候如果我们又不想增加多余的div就可以用ng-container

<ul>
    <ng-container *ngFor="let item of list">
        <li *ngIf="item.context">{{item.context}}</li>
    </ng-container>
</ul>

用法二（结合ng-template使用）

可以跟<ng-template>配合使用，将重复的模块内容抽取出来，也可传参给要显示的模板。
比如下面的这个例子，甲方有甲方姓名和介绍，乙方也同样有这些介绍，我们就可以把共同介绍整合出来。

<div>
    <!--甲方-->
    <div>
        <div class="left">甲方：</div>
        <div class="right">
            甲方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
            <!--也可以写成这种方式-->
            <!--
            <ng-container [ngTemplateOutlet]="introduce"
                [ngTemplateOutletContext]="{data: data.partyA}">
            </ng-container>
            [ngTemplateOutlet]也可用在ng-template上
            -->
        </div>
    </div>
    <!--乙方-->
    <div>
        <div class="left">乙方：</div>
        <div class="right">
            乙方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
        </div>
    </div>
    <!--let-data="data"就是上面传进来的值-->
    <ng-template #introduce let-data="data">
        <p>合同介绍......</p>
    </ng-template>
</div>

ngTemplateOutlet是定义模板引用和模板的上下文(即ng-template)对象的字符串

<ng-template> 

<ng-template>是一个 Angular 结构型指令，用来渲染 HTML。 它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把 ng-template 及其内容替换为一个注释。

<ng-template>用法

用法一

结合*ngIf使用，这样可以不用加两次不同判断条件，可以在HTML里直接使用if else语句

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暂无数据</div>
</ng-template>

用法二

可以在HTML中定义模板语句，在TS文件中进行调用。

<ng-tempalte #content>your content</ng-template>

export class AppComponent implements OnInit {
    // 引入模板
    @ViewChild('content') contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: '标题',
            nzContent: this.contentTpl
        })
    }
}