ng-template

ng-template

<ng-template>是一个Angular元素，用来渲染HTML，它不会直接展示在页面上，需要通过结构型指令将内容渲染到页面中。

在我们日常开发中见到的结构型指令，如 *ngIf，ngFor 是一个微语法，解开之后会变成 <ng-template>标签。在介绍<ng-template>之前我们下看一下ngIf解开语法糖，会是怎样的一个结构

*ngIf

<div *ngIf="hero" class="name">{{hero.name}}</div>

<!-- *ngIf翻译成ng-template元素之后 -->
<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

• *ngIf变成属性型指令，并绑定在ng-template元素上
• *ngIf的宿主元素被包含在ng-template元素内

ng-template用法

用法1

利用指令插入模板

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

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      // 容器内插入模板
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
    else {
      // 清除容器内模板
      this.viewContainer.clear();
    }

  }
}

app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent {
  condition = true;
}

app.component.html

<button (click)="condition = !condition">toggle</button>

<div *appUnless="condition"></div>

<ng-template [appUnless]="condition">
  <p class="code unless">
    (A) &lt;ng-template [appUnless]="condition"&gt;
  </p>
</ng-template>

用法2

使用ViewContainerRef操作DOM

import { Component, ViewContainerRef, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// $implicit 使用默认值
  context = { $implicit: 'World', name: 'liyq' }

  @ViewChild('myTpl') tpl: ElementRef;

  constructor(
    private vr: ViewContainerRef
  ) { }

  ngOnInit() {
    // 实例化一个内嵌视图，并把它插入到该容器中。
    this.vr.createEmbeddedView(this.tpl, { name: 'nihao' });

    this.vr.get(0);

    // this.vr.clear();
  }
}

app.component.html

<ng-container *ngTemplateOutlet="myTpl; context: context"></ng-container>

<ng-template #myTpl let-name="name">
  <h2>this is myTpl {{ name }}</h2>
</ng-template>

结果展示