Ionic 2/Angular 2のMapboxマーカークリックイベント

Question

Ionic 2/Angular 2を使い始め、Mapboxを自分のアプリに実装しようとしています。

カスタムマーカーを表示するには（code example here）Mapboxは、DOM要素を期待していますが、実際には角度の方法ではありません。マーカー上にクリックイベントを追加したいのですが、Mapboxは要素を使用しているため、これをきれいに「角度のある方法」に近づける方法は完全にはわかりません。

基本的に、これは最新バージョン（マップとマーカー作品を示したが、私は、マーカーをクリックすると、予想通りにイベントリスナーがthis.onMarkerClickedを見つけることができません）です。私はずっと幸せになると思います

export class HomePage { 
    //(...) 

    refreshMapPosition() { 
    /*Initializing Map*/ 
    mapboxgl.accessToken = this.config.mapbox_public_token; 
    this.map = new mapboxgl.Map({ /*https://www.mapbox.com/mapbox-gl-js/api/#map*/ 
     style: 'mapbox://styles/mapbox/light-v9', 
     center: [this.Coordinates.longitude, this.Coordinates.latitude], 
     zoom: 16, 
     pitch: 80, 
     minZoom: 7.5, 
     maxZoom: 17, 
     container: 'map', 
     interactive: false, 
    }); 

    var elCreature = document.createElement('div'); 
    elCreature.className = 'icon-creature alpaca'; 
    elCreature.addEventListener('click', function() { 
     this.onMarkerClicked(); 
    }); 

    var markerCreature = new mapboxgl.Marker(elCreature, {offset: [-20, -20]}) 
     .setLngLat([this.Coordinates.longitude, this.Coordinates.latitude]) 
     .addTo(this.map); 
    } 

    onMarkerClicked() { 
    console.log("click"); 
    } 
} 

もし私が<div class="icon-creature alpaca" (click)="onMarkerClicked"></div>を使うことができるコンポーネントからelCreatureを得ることが可能ならば。そこに最善のアプローチは何ですか？

Answer 1

// on your marker HTML 
var _self = this; 
var _data = this.value; 
el.addEventListener('click', function() { 
    self.markerClicked(_data); 
}); 

// angular method 
markerClicked(value){ 
    console.log(value); 
}