Angular google 映射自定义 HTML 信息窗口

Question

我正在使用 google-maps angular 组件 (https://github.com/angular/components/blob/master/src/google-maps/README.md)。我有一组标记，我想在其中显示带有自定义 HTML 的信息窗口。现在我的问题是如何在我的 infoWindows.

中显示自定义 HTML

到目前为止，我已完成 window 显示，唯一的问题是它显示正常字符串，而不是 HTML 内容。我的 component.html 看起来像：

<map-marker #markerElem="mapMarker"
    *ngFor="let marker of markersArray"
    [options]="marker"
    (mapClick)="openInfo(markerElem, marker.info)"
>
</map-marker>

<map-info-window>{{ infoContent }}</map-info-window>

在我的 component.ts 中：

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

infoContent: string;

openInfo(marker: MapMarker, content: string) {
    this.infoContent = content;
    this.infoWindow.open(marker);
}

如何让我的信息窗口显示 SOME TEKST 而不是 <h2>SOME TEKST</h2>？

Answer 1

在这种情况下，您应该使用 innerHTML 或 outerHTML 绑定：

<map-info-window>
  <div [innerHTML]="infoContent"></div>
</map-info-window>

或

<map-info-window>
  <div [outerHTML]="infoContent"></div>
</map-info-window>

它们之间的区别是前者会保留 <div> 包装器而后者不会。

Angular google 映射自定义 HTML 信息窗口

Angular google maps custom HTML infoWindow

javascript

angular

google-maps

google-maps-api-3

angular-google-maps