Angular原生动态加载器与Portal

本文详细介绍了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   // 一个生命周期钩子,为组件提供其他由开发人员定义的清理功能。
}

方式二

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值