首页 > 其他 > 详细

@angular/cli项目构建--modal

时间:2017-11-18 10:41:05      阅读:352      评论:0      收藏:0      [点我收藏+]

环境准备:

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
}

 

@angular/cli项目构建--modal

原文:http://www.cnblogs.com/Nyan-Workflow-FC/p/7855938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!