@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
}

demo:

app-modal-comfirm.cpmponent.html

<div class="modal-dialog">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" (click)="close()" >&times;</button>
      <div class="modal-title">{{title || 'confirm'}}</div>
    </div>

    <div class="modal-body">
      <p>{{message || 'Are you sure'}}</p>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-primary"(click)="confirm()">OK</button>
      <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
    </div>
  </div>
</div>

app-confirm.component.ts

import {Component, OnInit} from '@angular/core';
import {DialogComponent, DialogService} from 'ngx-bootstrap-modal';
import {Product} from '../../product/product.component';

export interface ConfirmModel {
  title: string;
  message: string;
}

@Component({
  selector: 'app-confirm',
  templateUrl: './confirm.component.html',
  styleUrls: ['./confirm.component.css']
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, Product> implements ConfirmModel {
  title: string;
  message: string;

  // 构造函数需要一个DialogService参数
  constructor(dialogService: DialogService) {
    super(dialogService);
  }

  confirm() {
    // result是一个boolean类型，这一点取决于{DialogComponent<ConfirmModel, boolean>}
    this.result = new Product(8, 'name_002', 800, 'desc_002', 'category_002');
    // close() 方法是由 `DialogComponent` 定义的，用于关闭模态框。在HTML模板中也有可以调用。
    this.close();
  }
}

app-product.component.ts

import {Component, OnInit} from '@angular/core';
import {DialogService} from 'ngx-bootstrap-modal';
import {BuildOptions} from '@angular/cli/models/build-options';
import {isNullOrUndefined} from 'util';
import * as _ from 'lodash';
import {Product} from '../../product/product.component';
import {ConfirmComponent} from '../../modal/confirm/confirm.component';

@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {

  model = new Product(7, 'name', 767, 'desc', 'category');

  constructor(private dialogService: DialogService) {
  }

  ngOnInit() {
  }

  onSubmit() {
    this.dialogService.show(<BuildOptions>{
      content: '保存成功',
      icon: 'success',
      size: 'sm',
      showCancelButton: false
    });
    this.reset();
  }

  reset() {
    this.model.id = null;
    this.model.name = null;
    this.model.desc = null;
    this.model.price = null;
    this.model.category = null;
  }

  confirm() {
    const disposable = this.dialogService.addDialog(ConfirmComponent, {
      title: 'Confirm title',
      message: 'Confirm message'
    }).subscribe((product) => {
      if (!isNullOrUndefined(product)) {
        this.model = product;
      }
    });
    // 可以调用 disposable.unsubscribe() 关闭对话框
    setTimeout(() => {
      disposable.unsubscribe();
    }, 10000);
  }
}