[转]Angular2 Material2 封装组件 —— confirmDialog确定框

本文转自:https://www.jianshu.com/p/0c566fc1730d

环境:

Angular 4.0.0
Angular2 Material2 2.0.0-beta.3
node v7.4.0
npm 4.0.5

使用Dialog封装confirmDialog确定框

源代码

来,首先来看效果图~

删除例子
确定删除框
点击确定后返回值

1.定义通用确定框组件

confirmDialog.component.html
<div class="clearfix"><h1 class="pull-left" md-dialog-title>{{ config.title || '确认操作' }}</h1> <span class="icon-close-mid pull-right md-dialog-title-close" (click)="mdDialogRef.close(false)"></span> </div> <div md-dialog-content>{{ config.content }}</div> <div md-dialog-actions class="confirm-dialog-operate"> <button md-raised-button color="primary" (click)="mdDialogRef.close(true)">{{ config.button || '确定' }}</button> <button md-raised-button (click)="mdDialogRef.close(false)" class="confirm-dialog-cancel">取消</button> </div> 
配置项描述
config.title可配置,默认为“ 确定操作 ”。确定框的标题。
config.content需配置。确定框的提示内容。
config.button可配置,默认为“ 确定 ”。操作按钮的文字。
confirmDialog.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { MdDialogRef } from '@angular/material'; import {MD_DIALOG_DATA} from '@angular/material'; @Component({ selector: 'confirm-dialog', styleUrls: ['confirmDialog.component.scss'], templateUrl: 'confirmDialog.component.html' }) export class ConfirmDialogComponent implements OnInit { config : {}; constructor(private mdDialogRef : MdDialogRef<ConfirmDialogComponent>, @Inject(MD_DIALOG_DATA) data: any){ this.config = data; } public ngOnInit() { } } 
confirmDialog.component.scss
.md-dialog-title-close:hover{cursor: pointer;
}
.confirm-dialog-operate{ margin-bottom: 0; margin-top: 15px; align-items: center; justify-content: center; } .confirm-dialog-cancel{ margin-left: 20px; } 

2.在app.module.ts引入组件

import { ConfirmDialogComponent } from './confirmDialog/confirmDialog.component';@NgModule({declarations: [ ··· ConfirmDialogComponent, ··· ], entryComponents: [ ··· ConfirmDialogComponent, ··· ] }) export class AppModule { } 

3.把组件注入到服务

为了通用,把组件注入服务,方便在其他地方使用。这样的话,就不用在每次使用的时候重新定义组件。

confirmDialog.service.ts
import { Component, Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser'; import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material'; import { ConfirmDialogComponent } from './confirmDialog.component'; import { Observable } from 'rxjs/Observable'; export class confirmDialogService { constructor( @Inject(MdDialog) public _confirmDialog: MdDialog, @Inject(DOCUMENT) doc: any) { // 打开dialog,body添加no-scroll样式 _confirmDialog.afterOpen.subscribe((ref: MdDialogRef<any>) => { if (!doc.body.classList.contains('no-scroll')) { doc.body.classList.add('no-scroll'); } }); // 关闭dialog,body移除no-scroll样式 _confirmDialog.afterAllClosed.subscribe(() => { doc.body.classList.remove('no-scroll'); }); } public confirm(contentOrConfig: any, title?: string): Observable<any> { // 设置dialog的属性,宽度,高度,内容等。 let config = new MdDialogConfig(); config = { width: '300px', height: '200px' }; if (contentOrConfig instanceof Object) { config.data = contentOrConfig; } else if ((typeof contentOrConfig) === 'string') { config.data = { content: contentOrConfig, title: title } } return this._confirmDialog.open(ConfirmDialogComponent, config).afterClosed(); } } 

4.使用例子

在需要使用的组件里的provides注册,就可以使用了,例子如下:

confirmDialog-example.component.ts
import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
import { confirmDialogService } from './confirmDialog.service'; @Component({ selector: 'confirmDialog', templateUrl: 'confirmDialog-example.component.html', providers: [confirmDialogService] }) export class DialogExampleComponent implements OnInit { lastCloseResult: any; public constructor(public _confirmDialogService: confirmDialogService) { } public confirm() { this._confirmDialogService.confirm({ content: '确认删除吗?' }).subscribe(res => { // 返回结果 if (res) { this.lastCloseResult = "删除成功"; } else { return; } }); } public ngOnInit() { } } 
confirmDialog-example.component.html
<p>Last close result: {{lastCloseResult}}</p><button md-raised-button (click)="confirm()">删除</button> 

确定删除后,返回结果: this.lastCloseResult = "删除成功"; 界面即显示删除成功,如上面的效果图示。

就这样完成了封装confirmDialog确定框的组件~



作者:LeeChingYin
链接:https://www.jianshu.com/p/0c566fc1730d
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

 

转载于:https://www.cnblogs.com/freeliver54/p/9741758.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/464807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目实战|100个蓝牙接收器发货了

还记得之前写的这篇文章不&#xff1a;《一个蓝牙实战项目的掏肺总结》&#xff0c;这个项目最近做完了&#xff0c;交了100套出去&#xff0c;这是发货前的大合照&#xff1a;做完此项目&#xff0c;有些许收获&#xff0c;在此分享给大家。东西虽简单&#xff0c;但它依然是一…

删除list中的一个节点

1、删除list中的一个节点&#xff0c;给定位置为i typedef struct _list_t { struct _list_t *next; int data; }list; void delete_node(list *head, int i) {list *p head, *q NULL;int j 0;if ((NULL head) || (0 > i)){return ;}while ((NULL ! p) &&…

内存不足 java.lang.OutOfMemoryError: Java heap space

问题描述Exception in thread "main" java.lang.OutOfMemoryError: Java heap space 解决方案[转] 一直都知道可以设置jvm heap大小&#xff0c;一直用eclipse写/调试java程序。一直用命令行or console加参数跑程序。现象&#xff1a;在eclipse的配置文件eclipse.ini…

【读书笔记】【独立思考】2018-04-03(1)

所有的事物都没有起点&#xff0c;也没有终点&#xff0c;有的只是过程。 不然的话&#xff0c;起点又是从哪里来&#xff1f;起点之前是否还有起点&#xff1f;终点又是从哪里来&#xff1f;终点之后是否还有终点&#xff1f; 从无中来&#xff0c;到无中去&#xff0c;中间的…

深圳的冬天真的来了

天气预报说&#xff0c;明天深圳的天气会很低。热了一整年&#xff0c;这次一定是真的了&#xff0c;大家出门记得穿厚一些。

date js 半年_moment.js 搜索栏获取最近一周,一个月,三个月,半年,一年时间

统计时间label: 统计时间,name: countTime,type: select,data: [{value: 0,text: 最近一周},{value: 1,text: 一个月},{value: 2,text: 三个月},{value: 3,text: 半年},{value: 4,text: 一年}]实现方式searchValue为搜索栏所选所填内容&#xff0c; 以及作为搜索和接口调用条件…

判断CPU大小端模式

int CheckCpuEndian(void) {union{int a;char b;}c;c.a1;return (1 c.b); } 返回1为LittleEndian。 联合体union的存放顺序是所有成员都从 低地址 开始存放, 若是小端模式&#xff0c;由低地址到高地址存放为0x01 00 00 00&#xff0c;c.b被赋值为0x01 CPU有两种字节序&a…

华为eudemon 200E的hrp双心跳热备配置

本文为大家介绍使用两台华为Eudemon200E防火墙实现双机双心跳的HRP热备的配置实例&#xff0c;主要的知识点包括&#xff1a;华为防火墙HRP、VRRP的配置&#xff0c;定义防火墙区域。 一、网络拓扑&#xff1a;二、配置要求&#xff1a; 1、两台防火墙为E200E-A和E200E-B&#…

【洛谷比赛】你的名字。

前言 打比赛的原因只是因为对君名的喜爱&#xff01; 好吧&#xff0c;准确来说没有参赛&#xff0c;只是赛后研究了一下题。我觉得出得蛮好的&#xff0c;优于昨晚那套题。 由于题不是那么水了&#xff0c;我就分开发题解了。 题解 T1 线索 T2 日常 后记 这套题质量确实不错&a…

2021 年 Linux 界的 12 件大事

2021年即将结束了&#xff0c;今天就和大家分享一些来自Linux世界最重要的大事&#xff0c;这些事件大大影响了Linux用户&#xff1a;1、理查德斯托曼回归2019年&#xff0c;自由软件基金会(Free Software Foundation)创始人理查德斯托曼&#xff08;Richard Stallman&#xff…

alloca函数的风险_alloca的函数范围中的goto是否有效?

实际上,规则6.8.6.1规定&#xff1a;A goto statement is not allowed to jump past any declarations of objectswith variably modified types.在您的代码中,不存在具有可变修改类型的对象. alloca不声明对象(编译器必须关注).因此,没有类似于alloca的范围,并且没有理由在规则…

atoi()

atoi()&#xff1a;将一个字符串转换为int型数 int atoi(const char *str) {assert(NULL ! str);int num0, sign1;while (*str || *str \t){str;}if (*str -){sign-1;str;}else if (*str ){sign1;str; }while (*str ! \0){if ((*str > 0) && (*str …

矩阵的变换。包括缩放、平移、错切

矩阵的变换。包括缩放、平移、错切-the transformation matrix. Incl...原文链接 #include<graphics.h>#include<math.h>typedef struct Matrix{float _a11,_a12,_a13;float _a21,_a22,_a23;float _a31,_a32,_a33;} Matrix;typedef struct Vert3{float x;float y;f…

关于Treap的学习感受

好了我就很愉快的回来补坑了~ Treap也是一种平衡树&#xff0c;它较普通二叉查找树而言&#xff0c;每个节点被赋予了一个新的属性&#xff1a;优先级&#xff08;没错就是类似优先队列的优先&#xff09;&#xff0c;对于Treap中的每个结点&#xff0c;除了它的权值满足二叉查…

2022年考研结束了

为期两天的研究生考试结束了。我没参加研究生考试&#xff0c;所以对研究生考试的压力不从得知&#xff0c;我从一个外人的角度来看&#xff0c;这无非就是一个简单的考试&#xff0c;考上了欢喜雀跃&#xff0c;考不上嘛&#xff0c;我就会说&#xff0c;大不了来年再考一次&a…

挂“洋头”卖奶粉,澳优还要欺骗好久

澳优奶粉近期被质疑非进口产品&#xff0c;公司总部实为湖南一家贴牌商。该奶粉生产商澳优乳业公司回应称其为“国外产品与本国品牌相结合”的国际化企业。但奶粉包装仍被质疑误导消费者&#xff0c;且售价偏高&#xff0c;澳优方称“与其高端品质相比只属于中上水平”&#xf…

DefWindowProc

简介 函数功能&#xff1a;该调用DefWindowProc函数时使用窗口过程接收的相同参数。函数原型&#xff1a;LRESULT DefWindowProc&#xff08;HWND hWnd&#xff0c;UINT Msg&#xff0c;WPARAM wParam&#xff0c;LPARAM IParam&#xff09;&#xff1b;功能 DefWindowProc这个…

mysql通过局域网访问数据库_MySQL数据库之局域网内访问同一个mysql数据库

本文主要向大家介绍了MySQL数据库之局域网内访问同一个mysql数据库 &#xff0c;通过具体的内容向大家展现&#xff0c;希望对大家学习MySQL数据库有所帮助。局域网内访问同一个mysql数据库。一、运行cmd&#xff0c;输入mysql -u root -p。二、输入mysql数据库密码&#xff0c…

排序算法之冒泡排序(C/C++)

冒泡法排序&#xff1a;平均时间复杂度O(n*n) 最差时间复杂度O(n*n) 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。对每一对相邻元素作同样的工作&#xff0c;从开始第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数重复以上工…

约翰·冯·诺依曼:一个向上帝买了挂的男人!!

来源|David 小咸鱼/新智元约翰冯诺依曼是20世纪最有影响力的人物之一。从原子弹&#xff0c;到计算机、再到量子力学、气候变化&#xff0c;你可能很难再找出像这样对我们今天的世界和生活影响更大的科学家了。在20世纪的天才中&#xff0c;有几个杰出的人物&#xff1a;爱因斯…