Angular原生动态加载器与Portal

江小虫儿

已于 2022-05-15 21:12:29 修改

阅读量734

点赞数 1

分类专栏： Angular 文章标签： javascript 前端 angular

于 2022-05-12 21:35:20 首次发布

本文链接：https://blog.csdn.net/kate_sicheng/article/details/124739906

版权

本文详细介绍了Angular中动态加载组件的两种方式，包括ComponentFactoryResolver和ViewContainerRef.createComponent，并探讨了动态加载内嵌视图的方法。此外，文章还深入讲解了Angular CDK中的Portal机制，包括ComponentPortal、TemplatePortal和DomPortalOutlet，以及它们与原生API的区别和使用场景。

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

一、动态加载组件

方式一

ComponentFactoryResolver

ComponentFactoryResolver是一个简单的注册表，这个注册表将组件映射到生成的 ComponentFactory 类。

作用：组件的模板不会永远是固定的。应用可能会需要在运行期间去加载一些新的组件。所以我们可以使用 ComponentFactoryResolver 来动态添加组件。

abstract class ComponentFactoryResolver {
   
  static NULL: ComponentFactoryResolver

  // 检索能创建给定类型的组件的工厂对象(实例化给定类型的组件的工厂)，并返回该工厂对象ComponentFactory。
  abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>
}

注意：从 v13 开始，建议使用 ViewContainerRef.createComponent() 创建动态组件。
ViewContainerRef.createComponent() 的第一个参数以前是支持传组件工厂，这个版本之后将弃用。从v13开始，第一个参数支持我们直接传组件类。
(具体看后面ViewContainerRef.createComponent 的使用）

ComponentFactory

ComponentFactory类可用来动态创建组件的工厂的基类。使用生成的 ComponentFactory.create() 方法创建该类型的一个新组件，返回值是一个组件 ComponentRef。

abstract class ComponentFactory<C> {
   
  abstract selector: string     // 组件的 HTML 选择器
  abstract componentType: Type<any>   // 工厂将创建的组件的类型
  abstract ngContentSelectors: string[]   // 组件中所有 元素的选择器
  abstract inputs: {
   ...}  // 组件的 inputs
  abstract outputs: {
   ...}  // 组件的 outputs
  abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: any, ngModule?: NgModuleRef<any>): ComponentRef<C>   // 创建该工厂对应组件类型的一个新组件
}

ComponentRef

表示由 ComponentFactory 创建的组件。提供对组件实例和相关对象的访问，并提供销毁实例的方法。

abstract class ComponentRef<C> {
   
  abstract location: ElementRef   // 该组件实例的宿主或锚点元素
  abstract injector: Injector   // 该组件实例的依赖项注入器(dependency injector)。
  abstract instance: C   // 该组件实例
  abstract hostView: ViewRef   // 模板为此组件实例定义的宿主视图 
  abstract changeDetectorRef: ChangeDetectorRef    // 此组件实例的变更检测器
  abstract componentType: Type<any>    // 此组件的类型（由 ComponentFactory 类创建）
  abstract destroy(): void   // 销毁组件实例以及与其关联的所有数据结构
  abstract onDestroy(callback: Function): void   // 一个生命周期钩子，为组件提供其他由开发人员定义的清理功能。
}