在Angular 8中,可以使用ViewChild和Modal组件的onHidden事件来实现模态关闭后的交互。
首先,在你的组件类中,使用ViewChild装饰器来获取模态组件的实例。假设你的模态组件是名为ModalComponent:
import { Component, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@ViewChild('modal') modal: ModalComponent;
constructor(private modalService: NgbModal) { }
openModal() {
this.modalService.open(this.modal);
}
}
然后,在ModalComponent中,可以使用onHidden事件来处理模态关闭后的交互:
import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
template: `
模态框标题
模态框内容
`
})
export class ModalComponent {
constructor(public modal: NgbActiveModal) { }
ngOnInit() {
this.modal.hidden.subscribe(() => {
console.log('模态框已关闭');
// 在这里可以进行模态关闭后的交互操作
});
}
}
在上面的示例中,我们使用了ng-bootstrap库来实现模态框的功能。在openModal方法中,我们通过this.modalService.open方法打开模态框,然后在ModalComponent的ngOnInit方法中订阅modal.hidden事件,当模态框关闭时,会触发这个事件并执行相应的交互操作。
注意:上述代码示例中的模态框是基于ng-bootstrap库实现的,如果你使用的是其他的模态框库,代码可能会有所不同。