#javascript #angular #google-maps #google-maps-api-3 #angular-google-maps
#javascript #angular #google-карты #google-maps-api-3 #angular-google-maps
Вопрос:
Я использую угловой компонент 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>
?
Ответ №1:
В этом случае вы должны использовать innerHTML
или outerHTML
привязку:
<map-info-window>
<div [innerHTML]="infoContent"></div>
</map-info-window>
или
<map-info-window>
<div [outerHTML]="infoContent"></div>
</map-info-window>
Разница между ними в том, что первое сохранит <div>
оболочку, а второе — нет.
Комментарии:
1. Может ли пользовательский компонент angular быть вложенным элементом внутри <map-info-window>, а не просто div?