NG Ng-template（模板元素）

ng-template
	<ng-template>是一个 Angular 元素，它永远不会直接显示出来。 在渲染视图之前，Angular 会把<ng-template>及其内容替换为一个注释 需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中
	ng-template 无法使用 "*"（星号）语法糖
	示例一
TemplateRef、ViewContainerRef
	把ng-template对应的元素显示出来。 TemplateRef对应ng-template的引用，ViewContainerRef则是view容器的引用用来操作DOM元素
	示例二
NgTemplateOutlet
	通过NgTemplateOutlet指令来显示已有的ng-template对应的视图。 NgTemplateOutlet指令用于基于已有的 TemplateRef 对象，插入对应的内嵌视图。 同时我们可以通过 [ngTemplateOutletContext] 属性来设置 ng-template 的上下文对象。 绑定的上下文应该是一个对象，ng-template中通过 let 语法来声明绑定上下文对象属性名
	示例三
复杂示例
	示例四

// 示例一
    <!-- 通过ngIf结构型指令显示ng-template的内容 -->
    <div class="lessons-list" *ngIf="condition else elseTemplate">
        判断条件为真
    </div>
    <ng-template #elseTemplate>
        <div>判断条件为假</div>
    </ng-template>

// 示例二

import {AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';

@Component({
    selector: 'app-template-section',
    template: `
        <ng-template #tpl>
            Hello, ng-template!
        </ng-template>
    `,
    styleUrls: ['./template-section.component.less']
})
export class TemplateSectionComponent implements AfterViewInit {
    @ViewChild('tpl')
    tplRef: TemplateRef<any>;

    constructor(private vcRef: ViewContainerRef) {
    }

    ngAfterViewInit() {
        // 这样tplRef对应的ng-template内容就显示出来了
        this.vcRef.createEmbeddedView(this.tplRef);
    }

}


export abstract class ViewContainerRef {
   /*基于TemplateRef对象创建Embedded View(内嵌视图)，然后根据`index`指定的值，插入到容器中。  
   如果没有指定`index`的值，新创建的视图将作为容器中的最后一个视图插入。*/ 
  abstract createEmbeddedView<C>(
     templateRef: TemplateRef<C>,  //内嵌视图
     context?: C, index?: number): // 创建上下文
      EmbeddedViewRef<C>;
}

// 示例三

import {AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';

@Component({
    selector: 'app-ng-template',
    template: `
        <!-- let-param 取的是绑定对象myContext的$implicit字段的值，let-param相和let-param="$implicit"是等价的， -->
        <!-- let-name="name" 取的是绑定对象myContext里面name字段对应的值-->
        <ng-template #inputTemplateWithContent let-param let-name="name">
            <div>{{param}} - {{name}}</div>
        </ng-template>
        <ng-container *ngTemplateOutlet="inputTemplateWithContent; context: myContext"></ng-container>
    `,
    styleUrls: ['./ng-template.component.less']
})
export class NgTemplateComponent {

    myContext = {$implicit: '默认值', name: 'tuacy'};

}

import {Component, Input, TemplateRef} from '@angular/core';

@Component({
    selector: 'app-template-input',
    template: `
        <!-- 没有传递参数的时候就使用defaultTemplate里面的布局 -->
        <ng-template #defaultTemplate>
            <div>咱们没有传递参数</div>
        </ng-template>
        <ng-container *ngTemplateOutlet="inputTemplate ? inputTemplate: defaultTemplate"></ng-container>
    `,
    styleUrls: ['./template-input.component.less']
})
export class TemplateInputComponent {
    @Input()
    inputTemplate: TemplateRef<any>; // 模板作为参数
}


// 使用的时候的代码

<!-- 我们定义一个组件，把ng-template的内容作为参数传递进去 -->
<ng-template #paramTemplate>
    <div>我是参数</div>
</ng-template>
<app-template-input [inputTemplate]="paramTemplate"></app-template-input>

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/NG-Ng-template-eb0509a949a749a680ff3b21c49a26e1