Ngx4-dialog NPM

Dialog

This project was generated with Angular CLI version 1.7.3.

安装

npm i ngx4-dialog

addDialog第一个参数

null
- null 不传component提示框
- 'prompt' 字符串prompt提示文本框
- Test1Component 传入对应的comonent

addDialog第二个参数

header
- title: string 弹窗标题
- icon: string 弹窗icon图标
- sizeWidth: string 弹窗宽度类名
btnList
- Array 数组
  - icon: string 按钮icon图标
  - type: string 按钮颜色 secondary | delete | success | blue
  - name: string 按钮显示文本
  - status: boolean 按钮状态 false => 直接关闭弹窗 true => 执行相对应操作
data
- Object 弹窗内对应数据
  - msg: string 提示文本框内容
customEvent
- String 执行相对应弹窗中事件
confirmOutEmit
- CallBack 返回弹窗内输出数据

addDialog第三个参数

options
- bgClose: boolean 是否点击背景关闭弹窗 true => 关闭 false => 不关闭默认true
- timeout: number 5000/ms 自动关闭弹窗单位毫秒

Demo

AppModule 引入

import ...

import {DialogModule} from './dynamic-dialog/dialog.module';
import {Test1Component} from './dialog/test/test1.component';
import {Test2Component} from './dialog/test2/test2.component';

@NgModule({
    declarations: [
        AppComponent,
        Test1Component,
        Test2Component
    ],
    imports: [
        BrowserModule,
        DialogModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [
        Test1Component,
        Test2Component
    ]
})
export class AppModule {
}

使用方法

import ...
import {Test1Component} from './dialog/test/test1.component';

@Component(...)
export class AppComponent implements OnInit {
    @ViewChild('btn') public btnElement: any;

    constructor(
        @Inject('dialog.service') public dialogService: any
    ) {}

    ngOnInit() {
        this.btnElement.nativeElement.addEventListener('click', () => {
            this.dialogService.addDialog(Test1Component, {
                header: {
                    title: '渠道名字'
                },
                btnList: [
                    {icon: 'fa-close', type: 'secondary', name: '取消', status: false},
                    {icon: 'fa-check', type: 'blue', name: '确认', status: true}
                ],
                data: {
                    msg: '2018.05.10 提示信息'
                },
                customEvent: 'getSubmitData',
                confirmOutEmit: data => {
                    console.log(data, '接收数据!!!!');
                }
            });
        });
    }

}

弹窗内接收及返回参数

import ...

@Component(...)

export class Test1Component {

    @Output() public outputEvent: any = new EventEmitter<any>();

    constructor(
        @Inject('dialog.service') public dynamicDialog: any
    ) {}
    
    /**
    * 接收参数
    */
    @Input() set setDialogData(data: any) {
        if (data) {
            console.log(data, '>>>>>>');
        }
    }

    /**
    * 按钮执行事件
    */
    getSubmitData() {
        // 返回参数
        this.outputEvent.emit('success!!!');
        this.dynamicDialog.addDialog('prompt', {
            header: {
                title: '渠道状态123'
            },
            btnList: [
                {icon: 'fa-check', type: 'blue', name: '确认', status: false}
            ],
            data: {
                msg: '2018.05.10 提示信息'
            }
        });
    }

}