Angular6中CDK中的Overlay与Portals的简介

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

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

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

1. GlobalPositionStrategy: 当overlay的PositionStrategy设置成GlobalPositionStrategy的时候，overlay的位置是相对整个窗口而言的。
2. ConnectedPositionStrategy: 当overlay的位置需要依赖于另外一个视图的位置的时候采用该ConnectedPositionStrategy来确定overlay的位置。可以使用FlexibleConnectedPositionStrategy来代替
3. 可以使用FlexibleConnectedPositionStrategy来代替： overlay的位置依赖于某个视图的位置。

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

1. NoopScrollStrategy: origin滚动的时候，overlay位置不动
2. CloseScrollStrategy: origin位置变动的时候，overlay会自动关掉
3. BlockScrollStrategy: origin的滚动也会消失掉
4. RepositionScrollStrategy: overlay会跟着origin位置的变动而变动

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

Portal的关键地方：

• ComponentPortal
• TemplatePortal
• PortalOutlet

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

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

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

所包含的属性:

1. C
2. location : ElementRef 组件实例的宿主元素所在的位置
3. injector : Injector 组件实例存在的注射器
4. instance : C 组件实例 [此次主要用到这个属性，可以在service中调用该组件实例上的方法]
5. hostview : ViewRef 组件实例的宿主视图ViewRef
6. changeDetectorRef : ChangeDetectorRef 组件的ChangeDetectorRef
7. componentType: Type 组件类型
8. destroy() : void 销毁组件实例及其附加数据
9. 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));
  }
}
复制代码

结论： 这样就可以通过仅仅引入一个service来实现一个弹窗，而不需要在使用的地方引入这个组件。本次介绍的比较简单，关于位置策略和滚动策略本次并没有深入讲解，希望大家在使用一些简单的overlay时，可以起到一些小的作用~ ?