在Angular UI Modal外部显示div的方法有多种。以下是一种常见的方法:
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);
});
}
}
这样,当调用openModal方法时,会打开一个modal,并在modal中显示定义的div内容。在modal关闭后,可以执行相应的操作。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云弹性伸缩(AS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云