源代碼：

<h1>ng-template</h1> <br><!-- 通過ngIf結構型指令顯示ng-template的內容 --> <div class="lessons-list" *ngIf="!condition else elseTemplate"><h3>標題:判斷條件為真</h3> </div> <ng-template #elseTemplate><div>判斷條件為假</div> </ng-template> <br>

運行時，準備渲染 id 為 elseTemplate 的模板：

TemplateRef有個方法：createEmbeddedView

兄弟comment節點：

TemplateRef對應ng-template的引用。

看一個實際的例子：

template 文件里，定義一個id為tpl的ng-template:

<ng-template #tpl><div>Hello, ng-template!</div> </ng-template>

在宿主文件里：

import {AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';@Component({selector: 'app-ng-template',templateUrl: './ng-template.component.html' }) export class NgTemplateComponent implements AfterViewInit {condition = true;@ViewChild('tpl')tplRef: TemplateRef<any>;myContext = {$implicit: '默認值', name: 'tuacy'};constructor(private vcRef: ViewContainerRef) {}ngAfterViewInit(): void {this.vcRef.createEmbeddedView(this.tplRef);}}

首先使用依賴注入，拿到ViewContainerRef引用。

使用@ViewChild, 拿到id為tpl的ng-template引用，類型為TemplateRef.

調用ViewContainerReference, 創建tpl模板實例。

注意，this.vcRef.createEmbeddedView, 雖然傳入的是templateRef，但實際上正是調用templateRef的createEmbeddedView方法。

創建完view后立即渲染：

2021-4-20

Represents an embedded template that can be used to instantiate embedded views.

TemplateRef代表一個嵌入的模板，可以被用來實例化嵌入視圖。

abstract class TemplateRef<C> {abstract elementRef: ElementRefabstract createEmbeddedView(context: C): EmbeddedViewRef<C> }

elementRef：The anchor element in the parent view for this embedded view.

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的ng-template 和 TemplateRef.createEmbeddedView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。