angular5 open modal

1. 在component 中打开modal,点击close 关闭modal

html:

<div class="modal-header " >
  <h4 class="modal-title">Message</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">×</span>
  </button>
</div>
<div id="modal_content" class="modal-body" [innerHTML]="modal_info">

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

 component:

 backdrop: 'static' : 点击modal 外的空白处，不会关闭modal;

 keyboard: false: 使按ESC 不会关闭modal

import {Component, OnInit, Input, Output} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';

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

  modal_info: string;
  modalRef: NgbModalRef;
  constructor(public activeModal: NgbActiveModal,
              private modalService: NgbModal) {
  }

  ngOnInit() {
  }

  openModal(modal_info: string): void {
    // this.modal_info = modal_info;

    // const modalRef = this.modalService.open(ModalDialogComponent);
    this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false});
    this.modalRef.componentInstance.modal_info = modal_info;
  }

2. 将modal做成一个遮罩层，调用modalRef 关闭 modal

this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false}); 
这行代码能打开一个modal,由于这次是使用modal来制作遮罩层，所以我们不需要在html 中写入任何的html.

import {Component, OnInit, Input, Output} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';

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

  modal_info: string;
  modalRef: NgbModalRef;
  constructor(public activeModal: NgbActiveModal,
              private modalService: NgbModal) {
  }

  ngOnInit() {
  }
// 打开一个空的modal,即遮罩层
  openModal(modal_info: string): void {
    // this.modal_info = modal_info;

    // const modalRef = this.modalService.open(ModalDialogComponent);
    this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false});
    this.modalRef.componentInstance.modal_info = modal_info;
  }
// 用于在其他component中关于遮罩层
  closeModal(): void {
     this.modalRef.close();
  }