Блог

Я использую угловой компонент Google-maps (https://github.com/angular/components/blob/master/src/google-maps/README.md). У меня есть массив маркеров, и я хочу показать InfoWindow с пользовательским HTML в нем. Теперь мой вопрос заключается в том, как отобразить пользовательский 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);
}
  

Как я могу заставить мое информационное окно отображать НЕКОТОРЫЙ ТЕКСТ вместо <h2>SOME TEKST</h2> ?

В этом случае вы должны использовать innerHTML или outerHTML привязку:

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

или

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

Разница между ними в том, что первое сохранит <div> оболочку, а второе — нет.