Tengo un componente angular "MapComponent" donde uso Javascript dentro de la función ngAfterViewInit() para inicializar el mapa del folleto. También vinculo una función onClick al componente de mapa. Mi objetivo es registrar un miembro de MapComponent en la consola cuando se hace clic en el mapa. Cuando la función onMapClick se activa por el evento de clic en el mapa, this se interpreta como el mapa pero no como MapComponent. ¿Cómo puedo lograr obtener acceso a los miembros de MapComponent dentro de la función onMapClick?

 import { Component, OnInit } from '@angular/core'; import { LeafletMouseEvent, Map } from 'leaflet'; declare let L: any; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements OnInit { private name = 'Test'; private view = [52, 9]; private start = [52.373920, 9.735603]; private end = [52.021111, 8.534722]; constructor() { } onMapClick(e: LeafletMouseEvent) { console.log( this.name ); } ngAfterViewInit(){ // Creating map element const map = L.map('map', {tap: false, zoomControl: false}).setView( this.view, 13); // Creating tile layer const tiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', }); // Adding tile layer to map tiles.addTo(map); map.fitBounds([ this.start, this.end ]); map.on('click', this.onMapClick); }; // ngOnInit ngOnInit( ): void { } }