Angular 2/4 Bing Map pin pin benutzerdefinierte Vorlage Funktionsaufruf

Question

Ich habe ein Problem, meine pinspin benutzerdefinierte Vorlage in eckige Komponente passen.

Meine Komponente:

import { Component, AfterViewInit } from '@angular/core'; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.scss'] 
}) 
export class MapComponent implements, AfterViewInit { 
    @ViewChild('myMap') myMap; 

    map: any; 
    infoboxClick; 
    infoboxTemplate = `<div id="infoboxText" class="custom-infobox"> 
          <span class ="close-sighn" onclick="closeCustomInfoBox()">x</span> 
          {description} 
         </div>`; 

    constructor(private dataService: MapService) { 
    } 

    ngAfterViewInit() { 
     this.getMap(); 
    } 


    getMap() { 

     if ((window as any).Microsoft && (window as any).Microsoft.Maps) { 
      this.map = new (window as any).Microsoft.Maps.Map(document.getElementById('mapId'), { 
       credentials: '' 
      }); 

      var pushpin = new (window as any).Microsoft.Maps.Pushpin(map.getCenter(), null); 
      (window as any).Microsoft.Maps.Events.addHandler(pushpin, 'click', (args) => { 
         this.infoboxClick.setOptions({ 
          location: args.target.getLocation(), 
          htmlContent: this.infoboxTemplate.replace('{description}', 'Some test description'), 
          visible: true 
         }); 
        }); 


      map.entities.push(pushpin); 

     } else { 
      setTimeout(() => { this.getMap() }, 1000); 
     }  
    } 

    closeCustomInfoBox() { 
    this.infoboxClick.setOptions({ 
     visible: false 
    }); 
    } 

} 

Meine Ansicht:

<div #myMap id="mapId" class="map-container"></div> 

In infoboxTemplate Ich habe Funktion 'closeCustomInfoBox()', die infobox schließen sollte.

1) Wie kann ich diese Funktion von meiner eckigen Komponente aufrufen?

2) Muss ich einen geeigneten Winkelbereich bekommen, wenn ich es so nenne, wie ich meine "infoboxClick" -Variablen erreichen kann?

Answer 1

Wenn Sie möchten, dass Sie auf CloseCustomInfoBox() - Funktion und InfoboxClick-Variable von der übergeordneten Komponente zugreifen möchten.

prüfen diese https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable