Ionic/Ng modalController 在 openlayers 监听器中未定义

Question

我正在尝试在选择 openlayers 功能时打开离子模式。
我已经注入了 ModalController，但是当它从侦听器中使用时它是未定义的。
我假设这是因为上下文不同，但我该如何解决这个问题？
我应该使用 eventEmitters 还是 rx/observables 还是可以正确附加监听器？ 这是代码

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ModalController } from '@ionic/angular';
    import { SelectActionNichoirPage } from '../../pages/modal/select-action-nichoir/select-action-nichoir.page';

    @Component({
    selector: 'app-openlayers-wrapper',
    templateUrl: './openlayers-wrapper.component.html',
    styleUrls: ['./openlayers-wrapper.component.scss'],
    })
    export class OpenlayersWrapperComponent implements OnInit {
    selectClick;

    constructor(public modalController: ModalController) {
    console.log("Construct modal" , this.modalController); // not Undefined
    }

    initMap() {

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer, observationsVectorLayer],
      view: this.view,
    });

    this.selectClick = new Select({
        condition: click
      });
    this.map.addInteraction(this.selectClick);

    console.log("add listen", this.modalController); // not undefined
    this.selectClick.on('select', function(e) {
       console.log(e.target.getFeatures().getLength() +
            ' selected features');
       console.log("modal ctrl in listener", this.modalController); // UNDEFINED
        });
    this.selectClick.on('select', this.presentModal); 
    }

    async presentModal() {
       console.log("modal ctrl in function", this.modalController);  // UNDEFINED
       const modal = await this.modalController.create({             // exception : no method create on undefined
         component: SelectActionNichoirPage
       });
       return await modal.present();
     }
    }

Answer 1

为了快速修复，这也可以帮助您确认您对问题的直觉，在声明函数之前保存对组件的引用，类似这样，

var self = this;
this.selectClick.on('select', function(e) {
    console.log(e.target.getFeatures().getLength() +
        ' selected features');
    console.log("modal ctrl in listener", self.modalController); // <- self
    self.presentModal(); <- self
});

Answer 2

您的问题出现是因为您使用 this.presentModal 和闭包作为回调。

通过在回调之后添加绑定函数来解决问题，例如 this.selectClick.on('select'. this.presentModal.bind(this);

更多关于“this”的信息可以在这里找到How does the "this" keyword work?。

这就是你的固定代码可以被修复的方法。

 import { Component, OnInit, ViewChild } from '@angular/core';
    import { ModalController } from '@ionic/angular';
    import { SelectActionNichoirPage } from '../../pages/modal/select-action-nichoir/select-action-nichoir.page';

    @Component({
    selector: 'app-openlayers-wrapper',
    templateUrl: './openlayers-wrapper.component.html',
    styleUrls: ['./openlayers-wrapper.component.scss'],
    })
    export class OpenlayersWrapperComponent implements OnInit {
    selectClick;

    constructor(public modalController: ModalController) {
    console.log("Construct modal" , this.modalController); // not Undefined
    }

    initMap() {

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer, observationsVectorLayer],
      view: this.view,
    });

    this.selectClick = new Select({
        condition: click
      });
    this.map.addInteraction(this.selectClick);

    console.log("add listen", this.modalController); // not undefined
    this.selectClick.on('select', function(e) {
       console.log(e.target.getFeatures().getLength() +
            ' selected features');
       console.log("modal ctrl in listener", this.modalController); // UNDEFINED
        }.bind(this));
    this.selectClick.on('select', this.presentModal.bind(this)); 
    }

    async presentModal() {
       console.log("modal ctrl in function", this.modalController);  // UNDEFINED
       const modal = await this.modalController.create({             // exception : no method create on undefined
         component: SelectActionNichoirPage
       });
       return await modal.present();
     }
    }