弹出窗口上的angular 2 Leaflet动态绑定

时间:2017-07-17 13:15:59

标签: leaflet angular2-template angular2-directives angular-leaflet-directive

我是angular2的新手。我有一个制作者的地图,我能够将弹出内容绑定为静态HTML代码

L.marker([long, lat], {
                  icon: L.icon({ iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' })
                }).bindPopup(HTMLCONTENT).addTo(this.map);

我会在HTMLCONTENT中插入一个动态内容,以便使用*ngFor(click)或其他角度设施,所以我构建了一个新的角度组件,如下所示

markerlink.componentes.ts

import {Component, Input} from '@angular/core';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-marker-link',
  templateUrl: './markerlink.template.html'
})
export class MarkerLinkComponent {

  @Input()
  points: any[] = [];

}

markerlink.template.html

<div *ngFor="let single of points">
  <a href="{{single.url}}">{{single.name}}</a>
</div>

在编译时,所有工作正常,当我转到索引时会生成包含所有标记的地图,但是当我点击其中一个时,我会看到一个空的弹出窗口。

可能配置不正确或有另一种方法吗?

1 个答案:

答案 0 :(得分:0)

似乎是&#34; HTMLCONTENT&#34;在下面的代码中

L.marker([long, lat], {
              icon: L.icon({ iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' })
            }).bindPopup(HTMLCONTETN).addTo(this.map);