Angular6中CDK中的Overlay与Portals的简介

Overlay 主要的作用是在页面上显示一个浮动的容器，比如常用的modal,select,notification

Overlay使用的关键在两个地方：

位置策略：一个处理overlay的显示位置

GlobalPositionStrategy: 当overlay的PositionStrategy设置成GlobalPositionStrategy的时候，overlay的位置是相对整个窗口而言的。

ConnectedPositionStrategy: 当overlay的位置需要依赖于另外一个视图的位置的时候采用该ConnectedPositionStrategy来确定overlay的位置。可以使用FlexibleConnectedPositionStrategy来代替

可以使用FlexibleConnectedPositionStrategy来代替： overlay的位置依赖于某个视图的位置。

滑动策略：一个处理有滑动的时候overlay的动作。

NoopScrollStrategy: origin滚动的时候，overlay位置不动

CloseScrollStrategy: origin位置变动的时候，overlay会自动关掉

BlockScrollStrategy: origin的滚动也会消失掉

RepositionScrollStrategy: overlay会跟着origin位置的变动而变动

Portals模块的功能就是将动态内容(可以是Component也可以是一个TemplateRef)显示到引用程序中。Portal:表示内容。PortalOutlet: 放置内容的位置。

Portal的关键地方：

ComponentPortal
TemplatePortal
PortalOutlet

现在通过一个在service中创建一个overlay作为实例进行使用这些点，这里以动态添加Component为例

首先介绍一些接下来会用的ComponentRef：

表示通过ComponentFactory创建的组件的实例。 ComponentRef提供对组件实例的访问以及与此组件实例相关的其他对象，并允许您通过destroy方法销毁组件实例。

所包含的属性:

C

location : ElementRef 组件实例的宿主元素所在的位置

injector : Injector 组件实例存在的注射器

instance : C 组件实例 [此次主要用到这个属性，可以在service中调用该组件实例上的方法]

hostview : ViewRef 组件实例的宿主视图ViewRef

changeDetectorRef : ChangeDetectorRef 组件的ChangeDetectorRef

componentType: Type 组件类型

destroy() : void 销毁组件实例及其附加数据

onDestroy(callback: Function) : void 允许注册将在组件销毁时调用的回调

export testClass{
    // 首先在一个service中引入NotificationTestComponent，这个就是要通过引入此service会显示的内容
    private _notificationTestRef: ComponentRef<NotificationTestComponent>;
    private _overlayRef: OverlayRef;
    
    // 调用 overlay.create() 会返回一个OverlayRef 实例. 这个实例用来处理具体的一个overlay
    // this._overlayRef 是一个 PortalOutlet- 一旦创建可以通过attach Portal添加内容
    private _createNotificationTest(): void {
    this._overlayRef = this._overlay.create();
    this._notificationRef = this._overlayRef.attach(new ComponentPortal(NotificationComponent));
  }
}