Angular的Cdk组件库

文章主要讲述一个浮层overlay和传送点portal的例子

目录

一、引入模块

二、Html部分

三、使用浮层和传送点

总结

---

一、引入模块

在module.ts引入浮层模块以及传送点模块,在component.ts中引入所需的服务以及类

module.ts:

import { PortalModule } from '@angular/cdk/portal';
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
    declarations: [ContractReminderComponent],
    imports: [
        CommonModule,
        PortalModule,
        OverlayModule,
    ],
    providers: [NzDestroyService],
})
export class ContractReminderModule {}

component.ts:

import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal, CdkPortal, TemplatePortalDirective } from '@angular/cdk/portal';

二、Html部分

 <div class="mg_t_10">
            <button nz-button nzType="primary" (click)="onJumpInfo() #buttonElement>弹出浮层</button>
            <ng-template cdkPortal #dateDicker="cdkPortal">
                <ul class="example-list">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </ng-template>
        </div>

三、使用浮层和传送点

 onJumpInfo{
            //this.overlay是用来创建浮层的服务使用position获取一个位置构建器，可以通过流式 API 来构建和配置定位策略。
            //他有一个方法flexibleConnectedTo创建灵活定位策略。这个方法接收一个参数origin（浮层定位相对的原点）
            // withPositions()是添加新的首选位置，接收一个参数positions（浮层定位选项的列表list[]-ConnectedPosition用户指定的连接位置）
            const strategy = this.overlay
                .position()
                .flexibleConnectedTo(this.buttonElement.elementRef.nativeElement)
                .withPositions([
                    {
                        originX: 'start', //浮层对于原点水平距离的偏移
                        originY: 'bottom', //浮层对于垂直距离原点的偏离
                        overlayX: 'start',
                        overlayY: 'top',
                        offsetX: 0, //浮层x轴的偏移
                        offsetY: 0,
                    },
                ]);
            //OverlayConfig创建浮层使用的初始配置 其中包含positionStrategy用于浮层定位的策略
            const config = new OverlayConfig({ positionStrategy: strategy });
            config.hasBackdrop = true; //浮层是否有背景板
            config.backdropClass = 'backdrop-with-out'; //去掉背景蒙版
            this.overlayRef = this.overlay.create(config); //创建一个浮层 传入浮层的配置返回值是浮层的引用。用来操纵或清除此浮层。
            //该浮层实例有一个方法为backdropClick 为单击背景板后的操作 返回可观察对象
            this.overlayRef.backdropClick().subscribe((result: any) => {
                this.overlayRef.dispose(); //销毁实例
            });
            this.overlayRef.attach(this.dateDicker);
        },

---

总结

具体用法可参照Angular Material UI 组件库

根据这里面对cdk模块的介绍和每个属性和方法的使用,可以对文档中的操作有更加全面的了解