@angular/cdk中overlay的使用

最新推荐文章于 2024-09-24 13:29:46 发布

不要葱花

最新推荐文章于 2024-09-24 13:29:46 发布

阅读量2k

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/moqiuqin/article/details/118737425

版权

本文介绍了Angular的CDK工具包中的Overlay组件使用，通过示例展示了如何创建浮层效果。虽然ng-zorro提供了丰富的组件，但了解CDK可以帮助提升组件库的维护水平。安装CDK后，引入相关CSS和模块，就可以开始使用Overlay了。

摘要由CSDN通过智能技术生成

cdk是angular官方维护的一个开发工具包，其实官网写的很明白了，只是overlay这块只有一个用指令写的demo，其他的一些用法只能看个人的理解能力去发挥他的强大功能了。了解cdk还是因为在使用ngzorro中发现这个浮层做的也太牛了，兴趣驱动下去了解才发现的。

其实一般情况下用了ngzorro，基本不用考虑去封装什么通用组件了，ngzorro基本都涵盖了，但是要想提高还是需要了解的，比如当你维护公司的组件库的时候。当初就是因为没了解cdk才写了那么多冤枉代码，浮层指令，拖拽功能，如今看到官方其实都有，才知道自己写的什么玩意，留下了菜鸡的眼泪o(╥﹏╥)o

中文官网有些部分感觉是机器翻译的，自己斟酌了

https://material.angular.cn/cdk/overlay/overview

首先当然是先安装cdk了

npm install @angular/cdk

引入相关的css

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

导入相应模块，比如：

 imports: [
	......
    OverlayModule,
    // 这个模块在实现一些方式上要用，官网也有介绍
    PortalModule
    ......
 ],
 providers:{
   provide: OverlayContainer, useClass: FullscreenOverlayContainer}

准备就绪就可以撸代码了，其实没什么好说的，结合官网很容易理解，写下来只是怕自己忘记而已O(∩_∩)O哈哈~

<section>
    <button (click)="openOverlay(0)" >打开弹窗,中心位置</button>
    <button (click)="openOverlay(100)" >打开弹窗,top100</button>
    <button (click)="byConnectedTo('component')" #byCompOri>依赖触发点打开弹窗展示组件</button>
    <button (click)="byConnectedTo('template')" #byTempOri>依赖触发点打开弹窗展示ng-template</button>
    <button (click)="direOpen=!direOpen" #trigger="cdkOverlayOrigin" cdk-overlay-origin>指令的方式展示</button>
</section>
<!-- 使用