@angular/cdk/portal小结

Portal 要渲染的特殊封装对象

PortalOutlet 是一个可以包含单个Portal的容器

export interface PortalOutlet {
  // 附加portal
  attach(portal: Portal<any>): any;
  // 剥离portal
  detach(): any;
  // 销毁
  dispose(): void;
  // 检查
  hasAttached(): boolean;
}
复制代码

BasePortalOutlet 基础PortalOutlet功能实现

abstract attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
abstract attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
复制代码

DomPortalOutlet PortalOutlet的Dom扩展实现

export class DomPortalOutlet extends BasePortalOutlet {
  constructor(
      public outletElement: Element,
      private _componentFactoryResolver: ComponentFactoryResolver,
      private _appRef: ApplicationRef,
      private _defaultInjector: Injector) {
    super();
  }
}
复制代码

CdkPortalOutlet PortalOutlet的Directive扩展实现

export class CdkPortalOutlet extends BasePortalOutlet{
  constructor(
      private _componentFactoryResolver: ComponentFactoryResolver,
      private _viewContainerRef: ViewContainerRef) {
    super();
  }
}
复制代码

OverlayRef PortalOutlet的弹框实现

export class OverlayRef implements PortalOutlet {
  constructor(
      private _portalOutlet: PortalOutlet,
      private _host: HTMLElement,
      private _pane: HTMLElement,
      private _config: ImmutableObject<OverlayConfig>,
      private _ngZone: NgZone,
      private _keyboardDispatcher: OverlayKeyboardDispatcher,
      private _document: Document
  ) {
    
  }
}
复制代码

Overlay

// 创建overlay容器，用于attach一个Portal或者detach
create(config: any): OverlayRef;
复制代码