NG-Alain + Angular11使用ModalHelper实现简单版本弹框,代码超级少,记得模块要引用这个组件
先看一下目录结构
--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实现简单版本弹框,代码超级少,记得模块要引用这个组件的更多相关文章
- 【jQuery学习】写一个简单的弹框页面,火狐浏览器有弹框,但IE8没有弹框的原因?
我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...
- vue的通讯与传递props emit (简单的弹框组件)
props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...
- openstack(liberty):部署实验平台(二,简单版本软件安装 part2)
继续前面的part1,将后续的compute以及network部分的安装过程记录完毕! 首先说说compute部分nova的安装. n1.准备工作.创建数据库,配置权限!(密码依旧是openstack ...
- openstack(liberty):部署实验平台(二,简单版本软件安装 part1)
软件安装过程中,考虑到现在是一个实验环境,且也考虑到规模不大,还有,网络压力不会大,出于简单考虑,将各个节点的拓扑结构改了一下,主要体现在网络节点和控制节点并在了一起.在一个服务器上安装! 到目前位置 ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- 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 ...
- 庐山真面目之四微服务架构Consul和Ocelot简单版本实现
庐山真面目之四微服务架构Consul和Ocelot简单版本实现 一.简介 在上一篇文章<庐山真面目之三微服务架构Consul简单版本实现>中,我们已经探讨了如何搭建基于Consu ...
- 自定义简单版本python线程池
python未提供线程池模块,在python3上用threading和queue模块自定义简单线程池,代码如下: #用threading queue 做线程池 import queue import ...
- [.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS
[.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS 本篇要点:在进阶篇快要结束的时候说说源代码管理器,我们的开发,不是一个人可以完成的事,团队协作很重要,而且 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
随机推荐
- Codeforces Round #751 (Div. 2)/CodeForces1602
CodeForces1602 Two Subsequences 解析: 题目大意 给你一个字符串 \(s\).你需要两个非空字符串 \(a\) 和 \(b\) 并且满足下面的条件: 字符串 \(a\) ...
- 3.httprunner-extract/.env/Testcase
参数关联-extract 场景:上一个接口的返回值,传给下一个接口当请求参数 extract:提取变量 $变量名 :引用变量 假设我们有如下场景 用户A登录之后,返回值返回用户UID,我们需要查询该用 ...
- XAF新手入门 - 模块(Module)
模块概述 谈到模块大家应该都不会感到陌生,不管是前端还是后端都有模块的概念,XAF中的模块概念与大多数框架中的模块概念是相通的.XAF模块首先是一个.NET类库,同时它还包含一个继承自ModuleBa ...
- PyGame做了一个扫雷
1 # 这是一个示例 Python 脚本. 2 3 # 按 ⌃R 执行或将其替换为您的代码. 4 # 按 双击 ⇧ 在所有地方搜索类.文件.工具窗口.操作和设置. 5 import sys 6 imp ...
- 怎么样子盒子能撑起父盒子?浮动,BFC,边距重叠
怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...
- selenium 添加特殊配置(如不完整 希望各位大神评论告诉我)
options 常用配置 #添加特殊配置 options=webdriver.ChromeOptions() #设置默认编码为utf-8,也就是中文 options.add_argument('lan ...
- 基于docker和cri-dockerd部署kubernetes v1.25.3
基于docker和cri-dockerd部署kubernetes v1.25.3 1.环境准备 1-1.主机清单 主机名 IP地址 系统版本 k8s-master01 k8s-master01.wan ...
- Vue2基础知识学习
Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...
- 介绍一个jmeter录制脚本谷歌插件 —— metersphere-chrome-plugin
该插件可将用户在浏览器操作时的 HTTP 请求记录下来并生成 JMX 文件(JMeter 脚本文件). 1. 插件解压 插件下载链接: https://pan.baidu.com/s/14nGb_s9 ...
- Sqlite 安装操作使用
一.什么是 SQLite 数据库 SQLite 是嵌入式SQL数据库引擎.与大多数其他 SQL 数据库不同,SQLite 没有单独的服务器进程.SQLite 直接读取和写入普通磁盘文件.具有多个表,索 ...