触发事件时,Angular下的FailoJS无法访问全局变量
对于这个Angular项目(我是Angular的新手——使用angular8,我在AngularJS上编写了很多代码,但这是完全不同的),我声明了一些全局变量,并创建了一个传单映射以及传单.draw插件。这张地图很好用。当触发事件“draw:created”时,我需要访问其中一个全局变量,但却得到一个未定义的错误(检查map base.component.ts上的注释行)。我做错了什么?我试图遵循推荐的做法,避免使用“窗口”对象。欢迎提出任何意见。代码: 环球旅行社触发事件时,Angular下的FailoJS无法访问全局变量,angular,leaflet,Angular,Leaflet,对于这个Angular项目(我是Angular的新手——使用angular8,我在AngularJS上编写了很多代码,但这是完全不同的),我声明了一些全局变量,并创建了一个传单映射以及传单.draw插件。这张地图很好用。当触发事件“draw:created”时,我需要访问其中一个全局变量,但却得到一个未定义的错误(检查map base.component.ts上的注释行)。我做错了什么?我试图遵循推荐的做法,避免使用“窗口”对象。欢迎提出任何意见。代码: 环球旅行社 import { Injec
import { Injectable } from '@angular/core'
import * as L from 'leaflet';
@Injectable()
export class Globals {
public L: any;
public map: any;
public enableFunc : boolean= true;
public initZoom: any = 10;
public initLatLng: any = [39.8, -75.5];
}
map-base.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { Globals } from 'src/global'
import * as L from 'node_modules/leaflet/dist/leaflet-src.js'
import 'src/assets/js/leaflet.draw.1.0.4.min.js'
@Component({
selector: 'map-base',
templateUrl: './map-base.component.html'
})
export class MapBaseComponent implements AfterViewInit {
[x: string]: any;
constructor(private global: Globals) {
this.global.L = L;
L.Browser.touch = true;
}
ngAfterViewInit() {
this.global.map = L.map('map', {}).setView(this.global.initLatLng, this.global.initZoom);
L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: '© CartoDB' }).addTo(this.global.map);
this.global.map.on('draw:created', function (e) {
//this line return the object map
console.log(this)
//THIS LINE RETURNS ERROR
console.log(this.global.initZoom);
}
}
}
对于Angular 2+,不要直接使用传单.js库。相反,请使用优秀的
ngx传单
包,它为Angular提供了Angular本机绑定和包装。按照官方的指示去做
如果你是Angular 2+的新手,你可能会发现最初让ngx传单发挥作用很有挑战性,但这是完全值得的
多亏@AJT82的评论,我才有可能解决这个问题 解决方案是使用lambda,因此“this”引用的上下文是正确的
this.global.map.on('draw:created', (e) => {
//this line return the object map
console.log(this)
//NOW THIS LINE RETURNS THE CORRECT VALUE
console.log(this.global.initZoom);
}
我考虑过使用ngx传单,但不幸的是我使用了大量的传单JS插件,我需要直接访问它们的一些功能。Ngx包裹传单并暴露组件,使事情变得更加困难。我在这里提供的代码只是我项目的一个非常简化的部分。我怀疑事件返回的是贴图对象而不是全局对象,因为传单不是“角度”世界的一部分。我可能错了。至少“这”是问题所在(双关语!)@AJT82完全解决了我的问题!谢谢