显示自定义标签信息窗口angular2

Question

map.component.ts代码：

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

map.component.html代码：

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

定制tag.component.html代码：

<h2>hi</h2> 

module.ts，routing.ts文件肯定没有错误。 infowindow只是打开并没有显示任何东西， 请帮我弄清楚为什么infowindow不显示任何东西。

Answer 1

你必须通过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); 

下面动态创建组件Plunker Example

不要忘记CustomTag组件添加到entryComponents