각도 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()'메소드를 호출합니다. 내가 제대로 자녀의 구성 요소 방법을 사용하는 구글의지도 (아마도 '바인딩'과 함께) '오른쪽 클릭하면'이벤트 리스너를 구현할 수있는 방법

// 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); 
});