Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现

筅森魡賤 提交于 2019-12-01 15:42:00

模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框。

下面,我用一个小例子来简单展示实现模态框功能的过程:

1、为项目加包:

ng add ngx-bootstrap

 

2、在xxx.module.ts(模块.ts文件)中引入:

...
import { ModalModule } from "ngx-bootstrap/modal";
...

@NgModule({
  imports: [
    ...
    ModalModule.forRoot(),
    ...
  ]
})
...

 

3、创建一个模块框公共组件:

//.ts部分

import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';


@Component({
  selector: 'response-modal',
  templateUrl: './response-modal.html'
})

export class  ResponseModalService {
    public header: string;
    public body: string;

    constructor(public modalRef: BsModalRef
      ) {}

}

 

<!--  模态框模板部分 .html -->

<style>
    .centerize { 
        text-align: center;
    }  
</style>

<div class="container-fluid"><!--  模态框容器样式 -->
    <div class="modal-header"><!-- 框头样式  -->
        <h5>{{ header }}</h5>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> <!--  关闭按钮样式 -->
            <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body" style="white-space: pre-line;"><!-- 框内容样式 -->
        {{ body }}
    </div>
    <div class="centerize">
        <button type="button" text-aling="center" class="btn btn-primary mr-2" (click)="modalRef.hide()">OK</button><!-- 常规按钮样式 -->
    </div>
<p>
</div>

 

4、在xxx.page.ts(模版.ts文件)中引入并,并调用:

import { BsModalRef, BsModalService } from "ngx-bootstrap";//引入模态框资源对象及服务对象
import { ResponseModalService } from "src/app/shared/component/response-modal";//引入上面创建好的模态框组件
...

public modalRef: BsModalRef;
...

constructor(
    private modalService: BsModalService,
    ...
  ) {
    ...
 }
...

public openUpdateNotification(message: string): void {
    this.modalRef = this.modalService.show(ResponseModalService, {//初始化一个之前创建好的模态框组件
      initialState: {
        header: "",
        body: message
      },
      class: "modal-lg"
    });
  }

 

5、在合适位置调用打开模态框的方法openUpdateNotification即可。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!