angular项目中modal的使用

超、凢脫俗 2022-12-17 08:54 151阅读 0赞

首先，安装@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);
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在 Angular 项目中使用 MQTT

Angular 是一个基于 TypeScript 构建的开发平台。它包括一个基于组件的框架，用于构建可伸缩的 Web 应用；一组完美集成的库，涵盖路由、表单管理、客户端-服务器

灰太狼/ 2024年02月21日 09:01/ 0 赞/ 67 阅读

相关 Ionic4/Angular8项目中使用echarts

Ionic4/Angular8项目中使用echarts 1、安装echarts包、ngx-charts包 2、angular.json中引入echart.js

╰半夏微凉°/ 2023年07月13日 13:38/ 0 赞/ 26 阅读

相关 angular项目中modal的使用

首先，安装@delon/theme插件接下开始使用 1、在需要的ts文件中引入 import \{ ModalHelper \} from ‘@delon/them

超、凢脫俗/ 2022年12月17日 08:54/ 0 赞/ 152 阅读

相关在Angular中使用ngx-bootstrap modal模态框

> bootstarp 中存在modal 模块，也称之为模态框 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

旧城等待，/ 2022年11月06日 14:52/ 0 赞/ 265 阅读

相关使用WebStrom运行angular项目

1.首先打开WebStrom 2.点击文件中的打开 ![70][] 3.找到创建的angular的文件夹点击确定 ![70 1][] 3.左上角会出现angular文

╰+攻爆jí腚メ/ 2022年05月10日 09:16/ 0 赞/ 247 阅读

相关【初始angular 】angular项目创建过程中需要注意的细节

【初始angular 】angular项目创建过程中需要注意的细节安装angular-cli工具 `yarn global add @angular/cli`

忘是亡心i/ 2022年03月06日 19:59/ 0 赞/ 299 阅读

相关 angular2+ 版本中使用ng-bootstarp模块中的modal模态框

在angular2+ 版本中使用ng-bootstrap模块中的modal模态框中，当使用表单的select以及input的值得改变来出发modal弹出时暴露出的错误如图h

傷城~/ 2022年02月16日 10:41/ 0 赞/ 157 阅读

相关 angular7项目中使用Iconfont字体图标库

iconfont官网 [https://www.iconfont.cn][https_www.iconfont.cn] 选择字体图标 1. 首先进入iconfo

约定不等于承诺〃/ 2021年10月18日 13:26/ 0 赞/ 414 阅读

相关 angular7项目中使用页面锚点

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决： html <div class="circle_l

缺乏、安全感/ 2021年10月18日 05:43/ 0 赞/ 536 阅读

相关使用Angular CLI创建项目

[Angular CLI][]是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。 1.设置开发环境 ①是否有安装Nodejs和np

雨点打透心脏的1/2处/ 2021年09月14日 06:48/ 0 赞/ 395 阅读