Angular6中CDK中的Overlay与Portals的简介

• 位置策略：一个处理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：

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时，可以起到一些小的作用~ :stuck_out_tongue_closed_eyes: