使div在Angular UI Modal外部显示

import { Component } from '@angular/core';
import { Modal } from 'angular-ui-bootstrap';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor(private modalService: Modal) {}

  openModal() {
    // 打开modal
    const modalRef = this.modalService.open(ModalContentComponent);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-modal-content',
  template: `
    <div>
      这是要显示的div内容
    </div>
  `
})
export class ModalContentComponent {}

import { Component } from '@angular/core';
import { Modal } from 'angular-ui-bootstrap';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor(private modalService: Modal) {}

  openModal() {
    // 打开modal
    const modalRef = this.modalService.open(ModalContentComponent);

    // 监听modal关闭事件
    modalRef.result.then((result) => {
      // 在modal关闭后执行相应的操作
      console.log('modal已关闭');
    }, (reason) => {
      // 在modal关闭后执行相应的操作
      console.log('modal关闭原因:', reason);
    });
  }
}