如何以角度 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);
       }
   }
   

在模态组件中我有 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

这两个组件在child - parent 关系中吗？

如果是这样，您可以使用input - output 方法。

在子组件中：

@Output() modalClosed: EventEmitter = new EventEmitter();
...
this.closed.emit(true);

在父模板中：

<modal-selector (modalClosed)="onModalClose($event)"></modal-selector>

在父组件中：

onModalClose($event) { */ do something when modal closes /* }

Answer 2

我认为您的问题似乎有些不清楚，但我正在根据您的问题标题回答

你可以像这样创建一个事件发射器的实例

eventEmit = new EventEmitter<your- model>();

现在您可以使用 emit 函数发出此事件：-

this.eventEmit.emit(here pass the values you want to pass);

在你想监听的组件中使用subscribe()方法监听事件。

Answer 3

您可以使用以下共享服务：

shared.service.ts：

声明一个主题：

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

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

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

this.sharedService.setModalStatus(isOpenModal);.

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

在你的组件中，注入shared.service.ts，你可以像这样订阅：

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