ngx-dialogbox

Angular4+ 对话框，有问题欢迎进QQ群交流：253681718，入群验证：ngx-dialogbox

live demo：对话框示例

说明

该对话框组件可以用于Angular4+的项目，上手简单，可以实现非常复杂的弹窗功能（如多层弹窗嵌套）。

安装

npm install ngx-dialogbox

如何在项目中使用

1、在app.module里面引入angular的BrowserAnimationsModule（用到了webanimation）和ngx-dialogbox的DialogBoxModule（必须要用forRoot）：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DialogBoxModule } from 'ngx-dialogbox';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DialogBoxModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {

}

2、在项目的根组件（一般是app.compoent.ts）中依赖注入angular的ViewContainerRef和ngx-dialogbox的DialogBoxService，并在构造函数里面传入ViewContainerRef：

import { Component, ViewContainerRef } from '@angular/core';
import { DialogBoxService } from 'ngx-dialogbox';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(
        public dialogBoxService: DialogBoxService,
        public container: ViewContainerRef
    ) {
        this.dialogBoxService.setDialogBox(container);
    }
}

3、在需要对话框的组件中，依赖注入DialogBoxService，使用create和show就能创建弹窗了，具体参数下一节会说明：

const dialogModal=this.dialogBoxService.create(options);
dialogModal.show();

参数说明

DialogBoxService的实例方法：

方法名	方法说明	返回值	例子
create	创建一个隐式弹窗，可以传各种参数来控制弹窗的行为，create中的参数见下	dialogModal对象，方法见下	this.dialogBoxService.create(options)

dialogModal对象的方法：

方法名	方法说明	传入参数	例子
show	显示隐式弹窗	无	dialogModal.show()
hide	隐藏弹窗，动画效果和destroy一样，但hide不会销毁弹窗实例，弹窗实例可以复用，请注意一定要在组件销毁时调用destroy方法，否则会内存泄漏！	无	dialogModal.hide()
destroy	销毁弹窗，动画效果和hide一样。	无	dialogModal.destroy()
setContent	动态改变弹窗的内容，可以是ng-template或string内容	arg1: TemplateRef | string	dialogModal.setContent("我是新的内容！")
setTitle	动态改变弹窗的标题	arg1: { type?:string, text?:string, icon?:string }	dialogModal.setContent({ type: "warning", text: "警告", icon: "fa fa-th" })
clearButton	清空按钮	无	dialogModal.clearButton()
addButton	添加按钮	arg1: { type?:string, text?:string, callback?:function }	dialogModal.addButton({ type: "primary", text: "关闭", callback(btn, self) {} })

this.dialogBoxService.create(options) 中传入的参数(options)

参数名	参数说明	类型	示例
width	弹窗宽度	string	"300px"
title	弹窗标题	{ type: string, text: string, icon: string }	{ type: "primary", text: "警告框", icon: "fa fa-bath" }
enableClose	是否显示右上角关闭按钮	boolean	true
enableBackdrop	点击背景是否关闭弹窗	boolean	true
content	弹窗内容	TemplateRef | string	"我是弹窗内容"
align	内容对齐方式	string	"center"
buttonList	按钮数组	Array	[ { type: "primary", text: "好", callback(btn, self) { self.destroy(); } } ]
onShow	显示弹窗之前执行的方法	function	(self, resolve) => { alert("正在启动！"); resolve(); }
onHide	隐藏弹窗之前执行的方法	function	(self, resolve) => { const confirmBox = confirm("是否隐藏弹窗?"); if (confirmBox) { resolve(); } }
onDestroy	销毁弹窗之前执行的方法	function	(self, resolve) => { const confirmBox = confirm("是否关闭弹窗?"); if (confirmBox) { resolve(); } }