1.在项目的常驻组件中,如header.component.js。目的是在任何页面的任何位置触发事件,进行事件传递。
import { ListServiceService } from './list-service.service';
constructor(
private listService:ListServiceService,
) {
document.onclick = (() => {
this.listService.goShowModel("data");
})
}
2.在list-service.service中
import { Subject } from 'rxjs';
export class ListServiceService {
//点击文档事件,关闭弹框某些弹框
private showModel = new Subject();
//获得一个Observable
hideModel =this.showModel.asObservable();
//发射数据,当调用这个方法的时候,Subject就会发射这个数据,所有订阅了这个Subject的Subscription都会接受到结果
goShowModel(data) {
this.showModel.next(data);
}
}
3.在弹框组件中,通过isShow控制下拉框是否显示
import { Subscription } from 'rxjs';
export class FilterMoreComponent implements OnInit {
subscription: Subscription;//监听事件流
isShow:boolean = false;//表示当前的弹框组件是否显示
constructor(
private listService:ListServiceService,
) {
this.subscription = this.listService.hideModel.subscribe((res:any) => {
this.isShow = false;
});
}
}
/**以上内容为个人笔记,若有疑问,欢迎大家留言。*/