Question

我有一个组件。

@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，然后分配一个新值来解决地图，则只显示一个灰色框。

正如您所看到的，我尝试了各种刷新机制，但似乎都没有正确刷新地图。

Complete Plunker

第一次单击显示/隐藏时，将绘制地图之后，它只是一个灰色的盒子。

Answer 1

angular指令 * ngIf 会删除DOM中的标记。但是你的组件只执行一次ngOnInit。因此，您的地图无法正确重新启动。

您可以使用 [style.display] 代替 * ngIf

  <div class="sh" [style.display]="address ? 'none' : 'block'">
    <panda-map ></panda-map>
  </div>

（我尝试了你的plunker，它正常工作）

谷歌地图* ngIf上的灰色框

1 个答案: