ngx-bootstrap modal模态框

导入Module

...
import {  ModalModule} from 'ngx-bootstrap';
...
...
@NgModule({
  declarations: [AddXXComponent],
  imports: [
  ...
    ModalModule.forRoot()
    ...

  ]
})
export class AddXXModule { }

在组件Components.ts中使用

import { Component, OnInit, TemplateRef  } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

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

    curModal: BsModalRef;
  config = {
    animated: true,      // 为true时，弹窗出现和取消时有动画效果
    keyboard: true,      // 为true时，点击键盘Esc键可以取消弹窗
    backdrop: true,     // 为 true时，弹窗出现时背景变灰
    ignoreBackdropClick: true   // 为true时，点击背景弹窗不会消失
    };
  constructor(
    private modalService: BsModalService
  ) {
  }

  //打开 模态框，size:默认
  openModal(template: TemplateRef<any>) {
    this.curModal = this.modalService.show(template, this.config);
    }
  // 打开模态框，size:大
    openModalWithClass(template: TemplateRef<any>) {
    this.curModal = this.modalService.show(
    template,
    Object.assign({}, this.config, { class: 'gray modal-lg' })
    );
    }
}

html中：

  <button class="btn btn-outline-secondary" type="button" (click)="openModalWithClass(counter)">超大模态框</button>
   <!-- <button class="btn btn-outline-secondary" type="button" (click)="openModal(counter)">默认大小模态框</button> -->
  <ng-template #counter>
    <div class="modal-header">
      <h4 class="modal-title">提示</h4>
      <button type="button" class="close pull-right" (click)="curModal.hide()" aria-label="Close">
        <span>&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="container-fluid">
        确定要删除？删除后无法恢复！
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-xs btn-white btncolor" data-dismiss="modal" (click)="curModal.hide()">取
        消</button>
      <button type="button" class="btn  btn-xs btn-danger" (click)="deleteSensor()" data-dismiss="modal">确
        定</button>
    </div>
  </ng-template>