中英文网站建设方案,个性化网站模板,株洲网页设计,北太平桥网站建设本文转自#xff1a;https://www.jianshu.com/p/0c566fc1730d 环境#xff1a; Angular 4.0.0 Angular2 Material2 2.0.0-beta.3 node v7.4.0 npm 4.0.5 使用Dialog封装confirmDialog确定框 源代码 来#xff0c;首先来看效果图~ 删除例子确定删除框点击确定后返回值1.定义通…本文转自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 classclearfixh1 classpull-left md-dialog-title{{ config.title || 确认操作 }}/h1 span classicon-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 classconfirm-dialog-operate button md-raised-button colorprimary (click)mdDialogRef.close(true){{ config.button || 确定 }}/button button md-raised-button (click)mdDialogRef.close(false) classconfirm-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 : MdDialogRefConfirmDialogComponent, 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) { // 打开dialogbody添加no-scroll样式 _confirmDialog.afterOpen.subscribe((ref: MdDialogRefany) { if (!doc.body.classList.contains(no-scroll)) { doc.body.classList.add(no-scroll); } }); // 关闭dialogbody移除no-scroll样式 _confirmDialog.afterAllClosed.subscribe(() { doc.body.classList.remove(no-scroll); }); } public confirm(contentOrConfig: any, title?: string): Observableany { // 设置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 pLast close result: {{lastCloseResult}}/pbutton md-raised-button (click)confirm()删除/button 确定删除后返回结果 this.lastCloseResult 删除成功; 界面即显示删除成功如上面的效果图示。 就这样完成了封装confirmDialog确定框的组件~ 作者LeeChingYin链接https://www.jianshu.com/p/0c566fc1730d來源简书简书著作权归作者所有任何形式的转载都请联系作者获得授权并注明出处。 转载于:https://www.cnblogs.com/freeliver54/p/9741758.html
