Angular2学习教程之TemplateRef和ViewContainerRef详解

emplate> 元素被封装为一个 TemplateRef 对象，它代表了一个模板的引用。TemplateRef 是 Angular 提供的一个核心服务，用于表示一个可插入的模板（ng-template）。这个模板可以在运行时动态地添加到组件视图中。在上面的例子中，`#tpl` 是一个模板引用变量，它为 TemplateRef 提供了一个名字，方便我们在组件类中通过 `@ViewChild` 装饰器获取模板引用。 ViewContainerRef 另一个关键角色是 ViewContainerRef，它是一个容器，可以用来插入、移除或替换模板引用（TemplateRef）所表示的视图。ViewContainerRef 提供了操作视图的方法，例如 `createEmbeddedView`、`detach` 和 `insert`，允许我们动态地管理组件的视图结构。 在 Angular 中，当你想要在运行时动态地插入模板时，你需要同时拥有一个 TemplateRef（模板的引用）和一个 ViewContainerRef（视图容器的引用）。例如，你可以使用这些对象来实现 ngIf 或者 ngFor 指令的效果，或者在自定义指令中动态生成视图。 让我们看一个使用这两者的简单示例，假设我们有一个动态显示列表项的指令： ```typescript import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appDynamicList]' }) export class DynamicListDirective { @Input('appDynamicList') items: any[]; constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {} addItem(item: any) { this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: item }); } removeItem(index: number) { const view = this.viewContainer.get(index); this.viewContainer.remove(index); } } ``` 在这个例子中，`appDynamicList` 指令接收一个数组 `items` 作为输入，`addItem` 方法会根据 `items` 数组的内容，使用 `templateRef` 创建新的视图，并将其插入到 `viewContainer` 中。每个视图都可以绑定到模板中的 `$implicit` 属性，从而让模板可以访问到当前处理的列表项。 在组件模板中，我们可以这样使用这个指令： ```html <ng-template #listItem let-item> <div>{{item.name}}</div> </ng-template> <div *appDynamicList="items"> <!-- 动态列表由 addItem 方法生成 --> </div> ``` 在这个模板中，`#listItem` 是模板引用，它被 `DynamicListDirective` 的构造函数接收，`*appDynamicList` 结构指令则提供了 ViewContainerRef。 总结一下，TemplateRef 和 ViewContainerRef 在 Angular 中是用于动态构建和管理视图的重要工具。TemplateRef 代表一个可插入的模板，而 ViewContainerRef 是一个视图容器，可以插入、删除或替换模板实例。这两个工具结合使用，使得我们能够创建复杂的、响应式的 UI，实现条件渲染、循环渲染等动态效果。在实际开发中，它们经常与 Angular 的动态组件和自定义指令一起工作，提供了极大的灵活性和表现力。