单张地图嵌套在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