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的实例方法：

dialogModal对象的方法：

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