angular5 open modal

最新推荐文章于 2025-04-09 14:29:20 发布

weixin_30492601

最新推荐文章于 2025-04-09 14:29:20 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wanthune/p/8973375.html

本文介绍如何在Angular应用中创建模态对话框，并详细解释了如何通过代码配置模态框的行为，例如防止点击背景关闭及禁用ESC键关闭等功能。此外还提供了将模态框作为遮罩层使用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
  }