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时，能够起到一些小的做用~ 😝