角2、子コンポーネントはGoogleマップのイベントを使用してコンテキストを失う

Question

コンポーネントでコンポーネントを使用している場合があります。 @ViewChild経由で子コンポーネントのプロパティにアクセスすることで、子コンポーネントのメソッドの定義が不定になります。このクラスから

// Parent component 

declare var google: any; 
@Component({ 
    selector: 'app-map', 
    templateUrl: ` 
    <div id="map"></div> 
    <app-context-menu></app-context-menu>`, 
    styleUrls: ['./map.component.css'], 
    providers: [CitiesService], 
}) 

export class MapComponent implements AfterViewInit { 
    @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent; 
    user: UserInterface; 
    city: any; 
    map: any; 

    constructor(
    private userStorage: UserStorage, 
    private citiesService: CitiesService, 
    private theMap: TheMap, 
) {} 

    ngAfterViewInit() { 
    this.findUserCityCoords(); 
    } 

    inittializeMap(mapOpts) { 

    let mapProps = { 
     center: new google.maps.LatLng(mapOpts.lat, mapOpts.lng), 
     zoom: mapOpts.zoom, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    let map = new google.maps.Map(document.getElementById('map'), mapProps); 
    let menu = this.contextMenu; 

    map.addListener('rightclick', (e) => { 
     console.log('map', this); 
     console.log('menu', this.contextMenu); 
     this.contextMenu.open(e); 
    }); 
    } 

    findUserCityCoords() { 
    let userCity = this.userStorage.getFromStorage().city; 

    this.citiesService.getCityConfig() 
     .subscribe(cities => { 
     cities.forEach(city => { 
      if (city.name === userCity) this.inittializeMap(city.center); 
     }); 
     }); 
    } 

'マップイベントリスナーが' 呼び出す 'menu.open（E）;'コンテキストが変更され、子コンポーネントの内部では、子コンポーネントのメソッドは使用できません。つまり 'this.draw（）'メソッドを呼び出します。私はきちんと私の子供のコンポーネントメソッドを使用するために、Googleのマップ（おそらく「バインド」を持つ）「右クリック」イベントリスナを実装するにはどうすればよい

// Child component 
import { Component, OnInit, ElementRef, AfterViewInit } from 

'@angular/core'; 
import { TheMap } from '../../services/mapServices/TheMap'; 
import { Marker } from '../../services/mapServices/marker.service'; 
declare var google: any; 

@Component({ 
    selector: 'app-context-menu', 
    templateUrl: './context-menu.component.html', 
    styleUrls: ['./context-menu.component.css'] 
}) 
export class ContextMenuComponent { 
    overlay; 
    el; 

    constructor(
    private theMap: TheMap, 
    private marker: Marker, 
    private elementRef: ElementRef 
) { 
    this.overlay = new google.maps.OverlayView(); 
    } 

    ngAfterViewInit() {} 

    open(e) { 
    let map = this.theMap.getMap(); 
    this.overlay.set('position', e.latLng); 
    this.overlay.setMap(map); 
    this.draw(); // <---- Here, this.draw() is not a function 
    // So I can access properties from constructor but not this.draw() and other methods of this class 
    }; 

    draw() { 
    // .... 
    } 

。 `} {オープン（e）の`後の `;おかげ

Answer 1

わからない私は質問が、() =>（矢印機能）あなたは私はあなたが`削除する必要があると思う

map.addListener('rightclick', (e) => { 
    console.log('map', this); 
    console.log('menu', menu); 
    this.contextMenu.open(e); 
});