Question

有两个组件List和Modal：

他们不是孩子 - 父母的关系。

问题是当你点击新按钮然后调用openModal()方法时，你会弹出一个弹出窗口。我设置this.isOpenModal = true;

列出组件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);
}

当关闭close方法时，我需要将其设置为false：isOpenModal：boolean = false; 并在List Component中提供该事件。

有任何解决方案吗？

Answer 1

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

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 
});

Answer 2

这两个组件是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 3

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

您可以像这样创建事件发射器的实例

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

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

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

在要监听它的组件中使用subscribe（）方法来监听事件。

如何以角度4发射事件发射器？

3 个答案: