Angular之ViewContainerRef、ViewRef、EmbeddedViewRef、TemplateRef

江小虫儿

已于 2022-05-03 02:57:38 修改

阅读量1.1k

点赞数

分类专栏： Angular 文章标签： angular.js javascript ecmascript

于 2022-05-03 01:39:25 首次发布

本文链接：https://blog.csdn.net/Kate_sicheng/article/details/124549857

版权

本文详细介绍了Angular中的关键视图概念，包括ViewContainerRef用于动态创建和管理视图，EmbeddedViewRef表示嵌入式视图，ViewRef作为通用视图接口，以及TemplateRef用于模板引用。文章还探讨了视图树的概念，并通过ngTemplateOutlet指令的实际应用进行了说明。

摘要由CSDN通过智能技术生成

1. ViewContainerRef 视图容器

ViewContainerRef 可以将一个或多个视图附着到组件中的容器。通过它可以动态创建内嵌视图、动态创建组件，可以添加、移动、删除视图容器中的视图。

abstract class ViewContainerRef {
   
  abstract element: ElementRef
  abstract injector: Injector
  abstract parentInjector: Injector
  abstract length: number
  abstract clear(): void
  abstract get(index: number): ViewRef | null

  // 创建内嵌视图(实例化一个内嵌视图，并把它插入到该容器中)，参数1：模板引用TemplateRef，参数2：要挂在在内嵌视图上的上下文对象。参数3：从 0 开始的索引，表示新视图要插入到当前容器的哪个位置。 如果没有指定，就把新的视图追加到最后。最终返回值是个内嵌视图EmbeddedViewRef。
  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>  ⭐️⭐️

  // 在视图容器上动态创建组件
  abstract createComponent<C>(componentType: Type<C>, options?: {
    index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; projectableNodes?: Node