Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/joomla/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
触发事件时,Angular下的FailoJS无法访问全局变量_Angular_Leaflet - Fatal编程技术网

触发事件时,Angular下的FailoJS无法访问全局变量

触发事件时,Angular下的FailoJS无法访问全局变量,angular,leaflet,Angular,Leaflet,对于这个Angular项目(我是Angular的新手——使用angular8,我在AngularJS上编写了很多代码,但这是完全不同的),我声明了一些全局变量,并创建了一个传单映射以及传单.draw插件。这张地图很好用。当触发事件“draw:created”时,我需要访问其中一个全局变量,但却得到一个未定义的错误(检查map base.component.ts上的注释行)。我做错了什么?我试图遵循推荐的做法,避免使用“窗口”对象。欢迎提出任何意见。代码: 环球旅行社 import { Injec

对于这个Angular项目(我是Angular的新手——使用angular8,我在AngularJS上编写了很多代码,但这是完全不同的),我声明了一些全局变量,并创建了一个传单映射以及传单.draw插件。这张地图很好用。当触发事件“draw:created”时,我需要访问其中一个全局变量,但却得到一个未定义的错误(检查map base.component.ts上的注释行)。我做错了什么?我试图遵循推荐的做法,避免使用“窗口”对象。欢迎提出任何意见。代码:

环球旅行社

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完全解决了我的问题!谢谢