标签：div select line sem highlight lin sele core tst
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();
}
标签：div select line sem highlight lin sele core tst
原文地址：https://www.cnblogs.com/wanthune/p/8973375.html
