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

我怎样才能让我的信息窗口显示一些 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>包装而后者则不会。