Aangulr官方组件开发包CDK

在实际项目使用中，会使用到官方的组件开发包，但对于其中一些比较常见的包还是需要掌握了解的。

目录

一、浮层Overlay

二、使用步骤

1.引入

2.步骤及效果

---

一、浮层Overlay

overlay 包提供了一种在屏幕上打开浮动面板的方法。

二、使用步骤

1.引入

代码如下（示例）：

import {OverlayModule} from '@angular/cdk/overlay';

2.步骤及效果

指令:CdkOverlayOrigin 该指令应用于某个元素，以便在使用 ConnectedPositionStrategy 时可以作为 Overlay 的原点。

指令：CdkConnectedOverlay 该指令旨在帮助用 FlexibleConnectedPositionStrategy 声明式的创建一个浮层。

点击按钮会出现浮层，再点一次按钮浮层消失

代码如下（示例）：

HTML:

           <button
                nz-button
                nzType="primary"
                (click)="getOpen()"
                type="button"
                cdkOverlayOrigin
                #trigger="cdkOverlayOrigin"
            >
                {{ isOpen ? 'Close' : 'Open' }}
            </button>
            <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" 
                 [cdkConnectedOverlayOpen]="isOpen">
                <ul class="example-list">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </ng-template>

TS:

 isOpen = false;
    getOpen() {
        this.isOpen = !this.isOpen;
    }

CSS:

.example-list {
    width: 100px;
    border: solid 1px #ccc;
    border-radius: 5px;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
}

.example-list > li {
    list-style-type: none;
    border-bottom: solid 1px #8b8b8b;
    padding: 8px 0;
}

.example-list > li:last-child {
    border-bottom: none;
}

---