ng-template

ng-template是angular提供的用来定义模板的标签,什么时候需要使用ng-template?,不着急，我们一步一步来，首先接着第二篇的father.component.ts，

import {Component, OnInit, ContentChild, TemplateRef, AfterViewInit,AfterContentInit, ViewChild, Input} from '@angular/core';
import { AppChild } from './child.component';@Component({selector:'app-father',template:`<div style="width:300px;height:400px;border:red 1px solid;display:flex;  flex-direction: column;justify-content: space-between;"><header style="flex:0 0 40px"><ng-content select="header"></ng-content></header><section style="flex:1 0 auto;"><ng-content select="section"></ng-content><app-child [items]="items"></app-child></section><footer style="flex:0 0 40px"><ng-content ></ng-content></footer><ng-template><b>模板1</b></ng-template></div> `
})
export class AppFather implements OnInit,AfterContentInit,AfterViewInit{@ContentChild(AppChild,{static:false})appChild: AppChild@ContentChild('img',{static:false})img: any@ViewChild(AppChild,{static:false}) viewAppChild:AppChild@Input()headDesc:string;items=[{name:"xxx",value:"xxx"},{name:"yyy",value:"yyy"}]ngOnInit(){}ngAfterContentInit(){console.log(this.appChild.getItemNameList());}ngAfterViewInit(): void {console.log(this.viewAppChild.getItemNameList())}
}

我们在模板中添加了

 <ng-template><b>模板1</b></ng-template>

预览一下：发现这段并没有显示。因为ng-template是定义模板，我们并没有使用

在ng-templete上添加代码 [ngIf]=“true”.即可显示。ng-template是angular内置的指令，这个指令有输入型属性ngIf,如果我们不设置的话，默认是false，内容不显示。

好了，这个只是ng-template的最基本用法，ng-template被解析后的节点是这样的：有一段注释，然后紧接着是ng-template内部包裹的内容

ngTemplateOutlet

这个是angular提供的一个指令，从字面意思看，就是模板的出口。也就是把模板渲染到哪里

回到father.component.ts,我们修改下ng-template，添加模板变量#temp1.然后添加一个占位符div，并且在div上应用ngTemplateOutlet指令，这个指令要求输入的是模板的引用。

意思就是把temp1这个模板应用到div上

预览一下

是渲染出来了，可以和我们想的结构不一样，模板内部的b标签竟然与div标签成平级了。。。
这显然不是我们希望看到的。怎么办？

ng-container

ng-container可以用来组织标签，包裹标签，并且不破坏结构，不添加额外的标签，
我们来修改下，把div换成ng-container

预览一下发现渲染出来后只有我们希望的b标签，没有其他标签。ng-container就是做这个事情的。