Angular 2/4 Bing Map图钉自定义模板函数调用

Question

I have problem to fit my pushpin custom template into angular component.

My component:

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

}

My view:

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

In infoboxTemplate I have function 'closeCustomInfoBox()', which should close infobox.

1) How I can call that function from my angular component?

2) I need to get proper angular scope if I call it how I can get approach to my 'infoboxClick' variables?

Answer 1

If you mean you want to access closeCustomInfoBox() function and infoboxClick variable from the parent component.

Check this https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable