在开始我们的blog之前，我们要先安装ngx-bootstrap-modal
npm install ngx-bootstrap-modal --save
不然我们的模态框效果会难看到你想吐
一、弹出方式一(此方法来自https://github.com/cipchk/ngx-bootstrap-modal)
1.alert弹框
(1)demo目录
--------app.component.ts
--------app.component.html
--------app.module.ts
--------detail(文件夹)
------------detail.component.ts
------------detail.component.html
(2)demo代码
app.module.ts导入必要的BootstrapModalModule 和ModalModule ，再注册它们
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//这种模态框只需要导入下面这两个
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
declarations: [
AppComponent,
DetailComponent
],
imports: [
BrowserModule,
BootstrapModalModule
],
providers: [],
entryComponents: [
DetailComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html创建一个可以弹出模态框的按钮
<div class="container"> <div class="row"> <button type="button" class="btn btn-primary" (click)="showAlert()">alert模态框</button> </div> </div>
app.component.ts编写这个按钮的动作showAlert()
import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { DetailComponent } from './detail/detail.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public dialogService: DialogService) {
}
showAlert() {
this.dialogService.addDialog(DetailComponent, { title: 'Alert title!', message: 'Alert message!!!' });
}
}
detail.component.html编写alert弹框的布局
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" >×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
这是alert弹框
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="close()">取消</button>
<button type="button" class="btn btn-default">确定</button>
</div>
</div>
</div>
detail.component.ts创建模态框组件，我们需要创建一个组件，然后由 ngx-bootstrap-model 帮忙引导启动