Anzeige benutzerdefinierten Tags in Google Maps Infowindow angular2

Question

map.component.ts Code:

...... 
infoWindow = new google.maps.InfoWindow(
{ 
    content: `<custom-tag></custom-tag>` //***not displaying anything*** 
}); 
infoWindow.open(map, marker); 
...... 

map.component.html Code:

<custom-tag></custom-tag>  <!--***displays hi***--> 
<div class="google-maps"></div> 

custom-tag.component.html Code:

<h2>hi</h2> 

Die Dateien module.ts, routing.ts haben sicher keine Fehler. Das Infofenster öffnet sich und zeigt nichts an. Bitte helfen Sie mir herauszufinden, warum das Infowindow nichts anzeigt.

Answer 1

Sie haben Komponente erstellt dynamisch über ComponentFactoryResolver

const compFactory = this.resolver.resolveComponentFactory(CustomTag); 
this.compRef = compFactory.create(this.injector); 

this.appRef.attachView(this.compRef.hostView); 

let div = document.createElement('div'); 
div.appendChild(this.compRef.location.nativeElement); 

this.infoWindow.setContent(div); 
this.infoWindow.open(this.map, marker); 

Hier ist Plunker Example

Vergessen Sie nicht CustomTag Komponente entryComponents

hinzufügen