1. <ng-template>元素

import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';@Component({ selector: 'app-code404', template: ` <!-- 這里使用一個模板變量，在組件中使用@ViewChild裝飾器獲取模板元素-->  <ng-template #tpl>   Big Keriy !  </ng-template> `,})export class Code404Component implements AfterViewInit{ // @ViewChild 裝飾器獲取模板元素 @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() {  // 使用ViewContainerRef對象的createEmbeddedView方法創建內嵌視圖。  this.vcRef.createEmbeddedView(this.tplRef); } }

這樣其實我們在視圖中就得到了一個什么...啊，就是一個'Big Keriy !'的字符串。

2. ngTemplateOutlet指令

a. ngTemplateOutlet

和routerOutlet是一個意思，將視圖(<ng-template>標簽中的內容)放到對應的ngTemplateoutlet下面。

import { Component } from '@angular/core'; @Component({  selector: 'app-code404',  template: `   <ng-template #stpl>    Hello, Semlinker!   </ng-template>   <ng-template #atpl>    Big Keriy !   </ng-template>   <div [ngTemplateOutlet]="atpl"></div>   <div [ngTemplateOutlet]="stpl"></div>`, }) export class Code404Component { }

最終的視圖應該是：

Big Keriy !
Hello, Semlinker!

b. ngOutletContex

看名字就知道意思。

ngTemplateOutlet指令基于TemplateRef對象，在使用ngTemplateOutlet指令時，可以通過ngTemplateOutletContext屬性來設置來設置EmbeddedViewRef的上下文對象?？梢允褂胠et語法來聲明綁定上下文對象屬性名。

import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';@Component({ selector: 'app-code404', template: `  <!-- 這里的messagey映射到下面context中message 再使用插值表達式的方式顯示message的值 -->  <ng-template #stpl let-message="message">   <p>{{message}}</p>  </ng-template>  <!-- 這里的messagey映射到下面context中message , let-msg是一種與語法糖的方式變量名是msg-->  <ng-template #atpl let-msg="message">   <p>{{msg}}</p>  </ng-template>  <!-- 若不指定變量值那么將顯示 $implicit 的值-->  <ng-template #otpl let-msg>   <p>{{msg}}</p>  </ng-template>  <div [ngTemplateOutlet]="atpl"     // 這里ngOutletContext綁定的是context對象     [ngOutletContext]="context">  </div>  <div [ngTemplateOutlet]="stpl"     [ngOutletContext]="context">  </div>  <div [ngTemplateOutlet]="otpl"     [ngOutletContext]="context">  </div> `,})export class Code404Component implements AfterViewInit{ @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() {  this.vcRef.createEmbeddedView(this.tplRef); } context = { message: 'Hello ngOutletContext!',  $implicit: 'great, Semlinker!' };  // 這里的$implicit是固定寫法}