如果未保留在ngDoCheck中,则Angular 8中的传单地图不会调整大小/更新

时间:2019-09-05 19:57:07

标签: angular leaflet ngx-leaflet

单张地图嵌套在DIV中,div有两个子组件并排显示。左侧是一个通过按钮切换的标签栏,右侧是应该响应的MAP。

将this.map.invalidDateSize()放入ngDoCheck并将其嵌套在setTimeout内是可行的,但是效率不高,只需将invalidDateSize()绑定到地图即可。

// HTML

<div class="test">
  <div *ngIf="t" class="test__two">
    <h1> Tabs </h1>
  </div>

  <div class="test__one" 
      leaflet 
      [leafletOptions]="options"
      (leafletMapReady)="onMapReady($event)">
  </div>
</div>
<button (click)="t = !t;testing()"> Test </button>

//模板

export class AppComponent implements OnInit,DoCheck {
  options;
  layersControl;
  map;
  time = false;

  ngOnInit() {
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
      ],
      zoom: 7,
      center: latLng(27.690564, -80.274092)
    };
  }

  ngDoCheck() {
    if(this.time) {
      console.log('docheck');
      setTimeout(() => {
      this.map.invalidateSize();
      }, 1);

      setTimeout(() => {
        this.time = false
      }, 100)
    }
  }

  onMapReady(map: Map) {
    this.map = map;
  }

  testing() {
    this.time = true;
    // setTimeout(function(){ this.map.invalidateSize()}, 1);
    // this.map.invalidateSize();
  }
}

我希望使用invaliddateSize()而不将其放入ngDoCheck

0 个答案:

没有答案