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

我有问题来适合我的图钉自定义模板到角度组件。Angular 2/4 Bing Map图钉自定义模板函数调用

我的组分：

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'变量？

来源

2017-08-28 Milos

你需要一个定制的信息框？您可以简单地将HTML添加到信息框的描述中，然后渲染。 – rbrundritt

如果您的意思是您想访问父组件的closeCustomInfoBox（）函数和infoboxClick变量。

入住这 https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

来源

2017-08-28 10:21:02 dwij

我用视图表示更新了我的问题。你能否在你的答案中提供更多细节？我没有父子组件，一切都是一个组件。我不知道BingMap如何代表这个模板，以及如何在我的示例中使用它。 – Milos

Btw检查此https://stackoverflow.com/questions/37550278/how-to-add-bing-maps-v8-to-angular-2-0 这就是你想要的？ – dwij

谢谢。我已经检查过了:)。这是关于如何添加地图一般，没有例子如何使用自定义图钉模板。 – Milos

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

回答

相关问题