angular - 如何以 Angular 4 发射事件发射器？

Question

有两个组件List和Modal:

他们不是父子关系。

问题是当您单击新按钮然后调用 openModal() 方法时，您会打开弹出窗口。我设置了 this.isOpenModal = true;

1. List Component openModal() 部分逻辑:

   public isOpenModal: boolean = false;
   
   public openModal(id: string): void {
       if (!this.isOpenModal) {
       this.isOpenModal = true;
       const data = {id: id};
       this.modalModel.add(AudienceModel.ENTITY_NAME, data);
       }
   }
   

在 Modal-Component 中我有 close() 方法:

isModalOpen: boolean;

public close(index: number): void {
    this.isModalOpen = false;
    this.audienceModel.isModalOpened = this.isModalOpen;
    for (let i = 0; i < this.modalsArray.length; i++) {
        if (this.modalsArray[index].modalStyle.zIndex <= this.modalsArray[i].modalStyle.zIndex) {
            this.modalsArray[i].modalStyle.zIndex--;
        }
    }
    this.modalsArray.splice(index, 1);
}

当执行关闭方法时，我需要将其设置为 false:isOpenModal: boolean = false;并在列表组件中提供该事件。

有什么解决方案吗？

Answer 1

您可以使用如下共享服务:

共享服务.ts :

声明一个主题:

openModalSubject : Subject<boolean> = new Subject<boolean>() ;

setModalStatus(isOpenModal : boolean){
 openModalSubject.next(isOpenModal);
}

现在你可以像这样使用 setter 后在你的组件中订阅主题:

this.sharedService.setModalStatus(isOpenModal); .

一旦您设置，主题就会将 isOpenModal 发布到您订阅它的组件。

在您的组件中，注入(inject) shared.service.ts 并且您可以像这样订阅:

this.sharedService.openModalSubject.subscribe((openModal: boolean) => {
 //do whatever you want with the openModal 
});