Angular 谷歌地图自定义 HTML infoWindow

Question

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

到目前为止，我已经完成了窗口显示，唯一的问题是它显示的是普通字符串，而不是 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);
}

如何让我的 infoWindow 显示 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> 包装器，而后者则不会。