angular项目中modal的使用

首先，安装@delon/theme插件
接下开始使用

1、在需要的ts文件中引入
import { ModalHelper } from ‘@delon/theme’;

2、在constructor中声明
constructor(private modal: ModalHelper) { }

3、点击按钮来打开弹框

this.modal
//.open方法打开modal框
//PostEditAddTagModal是自己写的弹框页面，open直接跳到这个自定义页面
//{ data: this.data || {}, postId: this.postId, postStatus: this.postStatus }是传递到modal的参数
//950代表modal的大小
.open(PostEditAddTagModal,{ data: this.data || {}, postId: this.postId, postStatus: this.postStatus },950)
//.subscribe监听返回结果，监听this.modal.destroy(true)括号里面的结果，这个自定义页面里面可以随意传，这边来接收
.subscribe((result: any) => {
        if (result) {
          this.closeModal.emit()
        }
      })

4、自定义弹框页面
html页面自己写，这里主要来说ts页面的内容

//首先需要接收传递过来的参数，就跟子组件接收父组件的写法一样
export class PostEditAddTagModal {
  @Input() data: any
  @Input() postId: number
  @Input() postStatus: string = ''

//接下来就是这个modal的操作逻辑

//关闭modal框操作
// 关闭弹框
  closeModal() {
    this.modal.destroy(true);
  }
}