@angular/cli项目构建--modal

环境准备：

cnpm install ngx-bootstrap-modal --save-dev

impoerts: [BootstrapModalModule.forRoot({container: ducument.body})]

usage:

import { Component } from ‘@angular/core‘;
import { DialogService } from "ngx-bootstrap-modal";

@Component({
    selector: ‘app-prooduct-add‘,
    template: `
    <div class="container">
        <button class="btn btn-default" (click)="dialogService.alert(‘提醒‘, ‘确认要删除吗？‘);">Show confirm</button>
        <button class="btn btn-default" (click)="showConfirm()">Show confirm</button>
    </div>
    `
})
export class AppComponent {
    constructor(public dialogService:DialogService) {}
    showConfirm() {
        // confirm 返回的是一个 Promise<boolean> 类型，如果在对话框中点【确认】返回 `true`，其他情况返回 `false`
        this.dialogService.confirm(‘提醒‘, ‘确认要删除吗？‘, <BuiltInOptions>{
            // 可选项，可以对部分参数重写
        }).then((result: boolean) => {
            // result
        });
    }
}

show:

this.dialogService.show(<BuiltInOptions>{
    content: ‘保存成功‘,
    icon: ‘success‘,
    size: ‘sm‘,
    showCancelButton: false
})

内置模态框包括 alert confirm prompt 三种形态

ngx-bootstrap-modal <BuildOpteions>config:

{
  "title": "标题",
  "content": "内容",
  "icon": "error|warning|success|info|question",
  "size": "sm|lg",
  "showCloseButton": true,
  "input": "text",
  "inputValue": "",
  "inputPlaceholder": "必填项",
  "inputRequired": true,
  "inputError": "",
  "inputAttributes": {},
  "showCancelButton": true,
  "cancelButtonText": "取消",
  "showConfirmButton": true,
  "confirmButtonText": "确认",
  "backdrop": false,
  "timeout": "3000",
  "keyboard": true
}