先看一下目录结构

--aa-item

----modal-compment

------modal-compment.component.html

------modal-compment.component.less

------modal-compment.component.ts

----aa-compment

------aa-compment.component.html

------aa-compment.component.less

------aa-compment.component.ts

--aa-item-routing.module.ts

--aa-item.module.ts

aa-item为模块

modal-compments省略了,这个就是弹框组件,正常写就行了

aa-compment为当前需要添加弹框的组件,好了,开始看代码

aa-compment.html

<button nz-button nzType="primary" class="formItem" style="width: 15%;" (click)="test()">test</button>

aa-compment.ts

import { Component, OnInit } from '@angular/core';
import { ModalComponent } from '../modal-compment/modal-compment.component';
import { _HttpClient, ModalHelper } from '@delon/theme';
@Component({
selector: 'app-aa-compment',
templateUrl: './aa-compment.component.html',
styleUrls: ['./aa-compment.component.less'],
})
export class AaComponent implements OnInit {
constructor(private modal: ModalHelper) {}
ngOnInit(): void {}
test1() {
let params = {
getDataObj: {
k1: 'ABC',
k2: 20,
k3: '2021/01/10 03:00',
k4: 104,
k5: 1,
},
};
this.modal.createStatic(ModalComponent, params, { size: 1366 }).subscribe((formValue) => {});
}
}

modal-compment

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { _HttpClient } from '@delon/theme'; @Component({
selector: 'app-modal-compment',
templateUrl: './modal-compment.component.html',
styleUrls: ['/modal-compment.component.less'],
encapsulation: ViewEncapsulation.Emulated,
})
export class ModalComponent implements OnInit { constructor(
) { } getDataObj: any = {} // 这个是从父组件获取的数据,放在这里
ngOnInit(): void {
console.log(this.record)
} }

最后,切记打开 aa-item.module.ts 添加


import { AaComponent } from './aa-compment/aa-compment.component.component';
import { ModalComponent } from '../modal-compment/modal-compment.component'; const COMPONENTS: Type<void>[] = [ModalComponent,AaComponent];

NG-Alain + Angular11使用ModalHelper实现简单版本弹框,代码超级少,记得模块要引用这个组件的更多相关文章

  1. 【jQuery学习】写一个简单的弹框页面,火狐浏览器有弹框,但IE8没有弹框的原因?

    我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...

  2. vue的通讯与传递props emit (简单的弹框组件)

    props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...

  3. openstack(liberty):部署实验平台(二,简单版本软件安装 part2)

    继续前面的part1,将后续的compute以及network部分的安装过程记录完毕! 首先说说compute部分nova的安装. n1.准备工作.创建数据库,配置权限!(密码依旧是openstack ...

  4. openstack(liberty):部署实验平台(二,简单版本软件安装 part1)

    软件安装过程中,考虑到现在是一个实验环境,且也考虑到规模不大,还有,网络压力不会大,出于简单考虑,将各个节点的拓扑结构改了一下,主要体现在网络节点和控制节点并在了一起.在一个服务器上安装! 到目前位置 ...

  5. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  6. java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter /struts2.1.3以前版本和之后版本区别/新版Eclipse找不到Java EE Module Dependencies选项

    严重: Exception starting filter struts2java.lang.ClassNotFoundException: org.apache.struts2.dispatcher ...

  7. 庐山真面目之四微服务架构Consul和Ocelot简单版本实现

    庐山真面目之四微服务架构Consul和Ocelot简单版本实现 一.简介      在上一篇文章<庐山真面目之三微服务架构Consul简单版本实现>中,我们已经探讨了如何搭建基于Consu ...

  8. 自定义简单版本python线程池

    python未提供线程池模块,在python3上用threading和queue模块自定义简单线程池,代码如下: #用threading queue 做线程池 import queue import ...

  9. [.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS

    [.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS 本篇要点:在进阶篇快要结束的时候说说源代码管理器,我们的开发,不是一个人可以完成的事,团队协作很重要,而且 ...

  10. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

随机推荐

  1. java中HashMap的设计精妙在哪?

    摘要:本文结合图解和问题,教你一次性搞定HashMap 本文分享自华为云社区<java中HashMap的设计精妙在哪?用图解和几个问题教你一次性搞定HashMap>,作者:breakDaw ...

  2. 「MySQL高级篇」explain分析SQL,索引失效&&常见优化场景

    大家好,我是melo,一名大三后台练习生 专栏回顾 索引的原理&&设计原则 欢迎关注本专栏:MySQL高级篇 本篇速览 在我们上一篇文章中,讲到了索引的原理&&设计原则 ...

  3. Unreal NetMode&NetRole 解析

    Version: Unreal 4.26 问题 为啥UE编辑器会有EPlayNetMode有三种让你选择. 为啥描述World 的ENetMode 会有4种,而不只是(Client/Server 2种 ...

  4. JavaWeb3

    1. 会话技术 会话:一次会话中包含多次请求和响应 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 功能:在一次会话的范围内的多次请求间共享数据 方式: 客户端会话技术:Co ...

  5. python进阶(26)collections标准库

    前言 这个模块实现了特定目标的容器,以提供Python标准内建容器dict ,list ,set , 和tuple 的替代选择. 这个模块提供了以下几个函数 函数 作用 namedtuple() 创建 ...

  6. 2022极端高温!机器学习如何预测森林火灾?⛵ 万物AI

    作者:ShowMeAI编辑部 声明:版权所有,转载请联系平台与作者并注明出处 收藏ShowMeAI查看更多精彩内容 今年夏天,重庆北碚区山火一路向国家级自然保护区缙云山方向蔓延.为守护家园,数万名重庆 ...

  7. ROSIntegration ROSIntegrationVision与虚幻引擎4(Unreal Engine 4)的配置

    ROSIntegration ROSIntegrationVision与虚幻引擎4(Unreal Engine 4)的配置 操作系统:Ubuntu 18.04 虚幻引擎:4.26.2 目录 ROSIn ...

  8. bugku 计算器

    打开就一个输入框和验证,尝试后发现输入框限制了位数,这还不简单,F12直接修改表单长度试试 成功得到flag

  9. AI赋能音乐创作,人人都是音视频创作者

    华为HMS Core音频编辑服务(Audio Editor Kit)依托自身AI技术的研发优势,上线全新的歌声合成音色及伴奏,给音视频创作者提供更多的创作可能.在短视频场景中,用户自定义歌词的歌声结合 ...

  10. JUC源码学习笔记6——ReentrantReadWriteLock

    系列文章目录和关于我 阅读此文需要有AQS独占和AQS共享的源码功底,推荐阅读: 1.JUC源码学习笔记1--AQS独占模式和ReentrantLock 2.JUC源码学习笔记2--AQS共享和Sem ...