离子2:如何从模态组件中捕获事件(由ModalController创建)

Question

是否有一种方法可以捕获从模态组件中发出的本地事件（使用modalController创建）而无需解散，而不必使用全局Events或服务？

这样做的角度方法是使用Renderer中的listen，但我看不到在这种情况下如何获得对组件实例的正确引用。

mycomponent.ts

...
export class MyComponent {
  @Output() myAwesomeEvent = new EventEmitter<string>();
  fireEvent() {
    this.myAwesomeEvent.emit('payload');
  }
}

parent.ts

...
const modal = this.modalCtrl.create(MyComponent);
// how do I catch 'myAwesomeEvent' emitted from within MyComponent?
...

Answer 1

离子版本4 这可能是解决方法吗？（似乎在我的应用中正常工作）

let eventEmitter= new EventEmitter();
eventEmitter.subscribe(res=>{
  console.log("emitterResult", res)
});
  const modal = await this.modalCtrl.create({
  component: MyComponent,
  componentProps: {
    clickFavorite: eventEmitter
  }
});

myComponent：

export class MyComponent{    
@Output() clickFavorite= new EventEmitter<any>();
  favorite(evt){
      this.clickFavorite.emit("OK");}
  }
}

Answer 2

访问modal中的 instance属性。

const modal = this.modalCtrl.create(MyComponent);
modal.didEnter.subscribe(() => {
    modal.instance.myAwesomeEvent.subscribe(....)
});

离子版本3：

this.modalCtrl.create(MyComponent).present().then((result) =>{
    result.instance.myAwesomeEvent.subscribe(....)
});

Answer 3

离子5

创建事件发射极，并将其添加到模式的componentProps属性中。然后，在模态组件中，在此事件中添加@Output装饰器。在modal.present() Promise中订阅此事件。

const modal = await this.modalCtrl.create({
      component: ModalComponent,
      cssClass: 'custom-modal-class-2',
      componentProps: { modalActionObserver: this.modalActionObserver, ActionEvent: new EventEmitter<any>() },
      backdropDismiss: true,
      initialBreakpoint: 0.6,
      breakpoints: [0, 0.25, 0.5, 0.6, 0.7, 1],
    });
    modal.present().then((result: any) => {
      modal.componentProps.ActionEvent.subscribe({
        next: (data) => {
      //do some action here
        }
      });

export class ModalComponent implements OnInit {
  @Output() ActionEvent
}