La carte Mapbox-gl.js n'est pas définie dans le projet angular-cli lors de l'événement load

Question

Démarrage d'un projet angular-cli et installation de mapbox-gl via npm. Inclus le script mapbox-gl et les styles dans le fichier angular-cli.json. Je peux afficher la carte, mais je ne peux pas ajouter de couche sur l'événement load. La carte est indéfinie? Voici le code HTML de modèle (app.component.html):

<div id="map" style="margin:0; padding:0; position:absolute; top:25px; bottom:0; width:100%;"> 
 
</div>

Et voici mon code de composants (de app.component.ts):

import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core'; 
 
import * as mapboxgl from 'mapbox-gl'; 
 
import { Map } from 'mapbox-gl'; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent implements OnInit { 
 
    @ViewChild("map") map: Map; 
 
    title = 'app'; 
 

 
    ngOnInit() { 
 

 
    mapboxgl.accessToken = 'blah'; 
 

 
    this.map = new Map({ 
 
     container: 'map', 
 
     style: 'mapbox://styles/mapbox/light-v9', 
 
     zoom: 5, 
 
     center: [-78.880453, 42.897852] 
 
    }); 
 

 
    this.map.on('load', this.onLoad); 
 
    } 
 

 
    onLoad(){ 
 
    console.log("map is loaded, can I still talk to it?"); 
 

 
    this.map.addLayer({ 
 
     "id": "points", 
 
     "type": "symbol", 
 
     "source": { 
 
      "type": "geojson", 
 
      "data": { 
 
       "type": "FeatureCollection", 
 
       "features": [{ 
 
        "type": "Feature", 
 
        "geometry": { 
 
         "type": "Point", 
 
         "coordinates": [-77.03238901390978, 38.913188059745586] 
 
        }, 
 
        "properties": { 
 
         "title": "Mapbox DC", 
 
         "icon": "monument" 
 
        } 
 
       }, { 
 
        "type": "Feature", 
 
        "geometry": { 
 
         "type": "Point", 
 
         "coordinates": [-122.414, 37.776] 
 
        }, 
 
        "properties": { 
 
         "title": "Mapbox SF", 
 
         "icon": "harbor" 
 
        } 
 
       }] 
 
      } 
 
     }, 
 
     "layout": { 
 
      "icon-image": "{icon}-15", 
 
      "text-field": "{title}", 
 
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
 
      "text-offset": [0, 0.6], 
 
      "text-anchor": "top" 
 
     } 
 
    }); 
 

 
    } 
 

 
}

Projet situé au https://github.com/derobiom/mapboxAngularCli

Answer 1

Essayez d'utiliser soit bind méthode

this.map.on('load', this.onLoad.bind(this)); 

ou fonction locale flèche

this.map.on('load',() => this.onLoad()); 

instance ou flèche fonction

load =() => { 
    ... 

De cette façon this sera référencée à l'instance composant