Angular 使用移动端ion-modal还有ion-popover组件在pad横向的时候会出现不兼容的问题，推荐使用Angular 之 Overlay

1. ion-modal组件在横向使用pad的时候，弹层是出不来的，已实践特此记录一下
2. ion-popover组件在横向使用pad的时候，弹出层能出来，但是滚动是有问题。
3. 所以博主发现这些ionic提供的组件虽然好用但是有些场景的兼容性还是有待考究的

简介

后来博主发现Angular 提供的组件开发包就非常的强大，使用起来页非常的简单，完全可以满足使用的需求
这里要介绍的就是Angular 之 Overlay浮层，能够满足弹出层的需求，且强大而兼容性非常强的一个组件，这个浮层的用法非常的简单，最推荐的和最简单的一种使用方法就是，指令法

Overlay使用

使用之前需要引入对应的样式和OverlayModule

@import '~@angular/cdk/overlay-prebuilt.css';

import {NgModule} from '@angular/core';
...
import {OverlayModule, OverlayContainer, FullscreenOverlayContainer} from "@angular/cdk/overlay";
...

@NgModule({
    imports: [
        ...
        OverlayModule,
        ...
    ],
    ...
})
export class CdkOverlayModule {
}

import {Component, ViewEncapsulation} from '@angular/core';
import {Overlay} from '@angular/cdk/overlay';

@Component({
    selector: 'app-cdk-overlay',
    template: `
        <button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
            指令实现
        </button>

        <ng-template cdk-connected-overlay
                     [cdkConnectedOverlayOrigin]="trigger"
                     [cdkConnectedOverlayWidth]="500"
                     cdkConnectedOverlayHasBackdrop
                     [cdkConnectedOverlayOpen]="isMenuOpen"
                     (backdropClick)="isMenuOpen=false">
            <div class="menu-wrap">
                我是通过指令实现的Overlay
            </div>
        </ng-template>
    `,
    styleUrls: ['./cdk-overlay.component.less'],
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
})
export class CdkOverlayComponent {

    /**
     * overlay是否显示
     */
    isMenuOpen = false;

    constructor(public overlay: Overlay) {
    }

}

参考了其他文章的代码，主要是自己写太费时间了，文末给了出处，也可以去看看写的很详细。

自己的一些心得

用指令法使用Overlay，有一个比较难的点就是定位的问题，这里介绍一个属性cdkConnectedOverlayPush=“true”，在ng-template标签加上这个，或许会有奇效
上面的大部分代码参考出处：https://www.jianshu.com/p/caec4ff0fa51/