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

时间:2017-08-28 09:55:35

标签: javascript angular bing-maps

我有问题将我的图钉自定义模板装入角度组件。

我的组件:

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

}

我的观点:

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

在infoboxTemplate中我有函数'closeCustomInfoBox()',它应该关闭信息框。

1)如何从我的角度组件中调用该函数?

2)如果我称它为接近我的'infoboxClick'变量,我需要获得适当的角度范围?

1 个答案:

答案 0 :(得分:0)

如果您的意思是要从父组件访问closeCustomInfoBox()函数和infoboxClick变量。

检查一下 https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable