在初始加载时隐藏传单 angular 地图

Question

我有一张地图，其后 css 是 used.When 页面加载我希望地图隐藏并仅在按下按钮后加载

我在控制台上使用了以下内容，它正在运行，它隐藏了地图

    document.getElementsByClassName('DemoMap')[0]).style.height="0px";

但是从打字稿代码

    (<HTMLElement>document.getElementsByClassName('DemoMap')[0]).style.height="0px";

我收到运行时错误


TypeError: Cannot read property 'style' of undefined

.DemoMap {
  z-index: 1;
  position: absolute;
  width: calc(100% - 600px);
  height: calc(100% - 400px);
  top: 60px;
}

Answer 1

创建一面旗帜 isMapVisible = false;

在您的标记中使用 [style.display] 配置标志的状态：

<div
  style="height: 90vh;"
  [style.display]="isMapVisible ? 'block' : 'none'"
  leaflet
  [leafletOptions]="options"
></div>

<button (click)="showMap()">Show map</button>

使用事件侦听器使用按钮将布尔值的状态更改为 true：

showMap() {
    this.isMapVisible = true;
}

Demo

在初始加载时隐藏传单 angular 地图

Hide a leaflet angular map on initial load

css

angular

typescript

leaflet

ngx-leaflet