Mapbox-gl.jsマップは、ロードイベントのangle-cliプロジェクトでは定義されていません

Question

angle-cliプロジェクトを開始し、npm経由でmapbox-glをインストールしました。 angular-cli.jsonファイルにmapbox-glスクリプトとスタイルが含まれています。表示する地図を取得できますが、ロードイベントにレイヤーを追加することはできません。地図は突然定義されていませんか？ここでは、テンプレートのHTMLは（app.component.html）です：

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

そして、ここに私のコンポーネントのコードがある（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" 
 
     } 
 
    }); 
 

 
    } 
 

 
}

にあるプロジェクトhttps://github.com/derobiom/mapboxAngularCli

Answer 1

いずれかbind方法

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

またはローカル矢印関数

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

またはインスタンス矢印機能

load =() => { 
    ... 

thisコンポーネントインスタンスに