angular组件开发之-ng-content，contentChild,ng-container,ng-templeate,viewChild详解-第三篇

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:`
            

                

                   
                
                

                  
                  
                
                

                   
                
                
                   模板1
                
              
 
            `
})
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())
    }
}

我们在模板中添加了

 
                   模板1
                

预览一下：发现这段并没有显示。因为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就是做这个事情的。