Ionic/Ng modalController 在 openlayers 侦听器中未定义
Ionic/Ng modalController is undefined inside openlayers listener
我正在尝试在选择 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();
}
}
为了快速修复,这也可以帮助您确认您对问题的直觉,在声明函数之前保存对组件的引用,类似这样,
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
});
您的问题出现是因为您使用 this.presentModal 和闭包作为回调。
问题已通过在回调后添加绑定函数解决,例如
this.selectClick.on('select'. this.presentModal.bind(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();
}
}
我正在尝试在选择 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();
}
}
为了快速修复,这也可以帮助您确认您对问题的直觉,在声明函数之前保存对组件的引用,类似这样,
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
});
您的问题出现是因为您使用 this.presentModal 和闭包作为回调。
问题已通过在回调后添加绑定函数解决,例如
this.selectClick.on('select'. this.presentModal.bind(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();
}
}