Angular Dialog 组件的设计与实现

最新推荐文章于 2024-04-14 10:00:58 发布

燕云长风

最新推荐文章于 2024-04-14 10:00:58 发布

阅读量651

点赞数 1

分类专栏： Angular

本文链接：https://blog.csdn.net/m0_37050947/article/details/90606282

版权

本文介绍了基于Angular、TypeScript和RxJS的yycf-dialog组件库，提供Loading、Message和Confirm三种功能。组件在npm上获得高下载量，并详细展示了DialogService和服务类、组件类的实现。此外，还分享了作者的相关项目和博客链接。

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

Angular Dialog 组件的设计与实现

你好，我是燕云长风。
寓意：结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里，吹度玉门关。

yycf-dialog 是一个基于Angular开发的通用业务组件库，包含Loading， Message 和 Confirm。前端技术栈：Angular，TypeScript，RxJS 高级实现了此dialog组件，组件发布到 npm 市场两天后，下载量达到451，以此为契机，希望让更多的人来了解和使用。
为了让大家更加直观了解，我截取了一组在线运行图：

这是loading正在加载的效果

这是confirm的效果

这是message的效果

安装

 npm install yycf-dialog

使用

import { DialogModule, DialogService} from 'yycf-dialog/components';

<yycf-dialog [key]="'1'"></yycf-dialog>
<yycf-dialog [key]="'2'"></yycf-dialog>
<yycf-dialog [key]="'3'"></yycf-dialog>

//自定义的footer button 需要自定义button样式，或者直接使用其他组件库的button
<yycf-dialog [key]="'4'" #ct>
  <yycf-footer>
    <button class="customButtonClass" (click)="ct.accept()">确定<button>
    <button class="customButtonclass" (click)="ct.reject()">取消<button>
  <yycf-footer>
<yycf-dialog>

export class DialogDemo  implements OnInit{ 
           
    constructor(private dialog: DialogService) {}
 
    ngOnInit(){

    this.dialog.confirm(
      {
        message:'确定要删除吗?',
        header:'warning',
        okVisible:true,
        offVisible:true,
        okButton:'blue',
        offButton:'green',
        okLabel:``,
        key:"1",
        offLabel: ``,
        accept:()=>{
              this.dialog.confirm({
                message:'已删除',
                header:'ok&#