我有一个组件。
@Component({
selector: "panda-map",
template: `
<div class="map" [style.height.px]="height">
</div>
`
})
export class PandaMapComponent implements OnInit {
@Input() height: string = "400";
@Input() scroll: boolean = false;
map: google.maps.Map;
constructor(
private readonly element: ElementRef,
private readonly logger: NGXLogger) {
}
ngOnInit(): void {
const div = this.element.nativeElement.querySelector("div");
if (this.map)
return;
this.map = new google.maps.Map(
div,
{
zoom: 8,
center: { lat: -26.1714402, lng: 28.0050053 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: this.scroll
});
google.maps.event.trigger(this.map, "resize");
google.maps.event.addListener(this.map, "idle", function () {
google.maps.event.trigger(this.map, "resize");
});
}
}
地图显示在父组件上,如下所示:
<div class="pull-left shadow-panel map" *ngIf="address">
<div>
<panda-map [height]="400">
</panda-map>
</div>
</div>
地址会定期更改。
第一次创建地图时,它完美无缺。如果地址设置为null,然后分配一个新值来解决地图,则只显示一个灰色框。
正如您所看到的,我尝试了各种刷新机制,但似乎都没有正确刷新地图。
第一次单击显示/隐藏时,将绘制地图 之后,它只是一个灰色的盒子。
答案 0 :(得分:0)
angular指令 * ngIf 会删除DOM中的标记。但是你的组件只执行一次ngOnInit。因此,您的地图无法正确重新启动。
您可以使用 [style.display] 代替 * ngIf
<div class="sh" [style.display]="address ? 'none' : 'block'">
<panda-map ></panda-map>
</div>
(我尝试了你的plunker,它正常工作)