为什么 angular 2 中的 ngx-leaflet 在通过 *ngif 更改状态后不渲染地图
why ngx-leaflet in angular 2 does not render the map after changing state by *ngif
我对来自 angular 2 的 ngx-leaflet 组件有疑问。
在地图出现时将 *ngif 的状态从 true 更改为 false 并再次从 false 更改为 true 后,不会出现图块渲染。
我该怎么做才能避免这个问题?
这是我的html代码
<button (click)="showMap=!showMap">toggle</button>
<div *ngif="showMap">
<div [style.height.px]="mapHeight" leaflet
(leafletClick)="mapOnClick($event)"
[(leafletCenter)]="mapCenter"
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
[leafletLayers]="layers">
</div>
</div>
这是我的打字稿代码
options = {
layers: [
tileLayer('http://tile.openstreetmap.org/...',
{ maxZoom: 18, attribution: '...' })
],
zoom: 12,
center: latLng(35.679966, 51.4)
};
map = null;
onMapReady(map: Map) {
this.map = map;
}
mapOnClick(evt) {
}
对 options
使用 getter。
get options(){
return {
layers: [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
],
zoom: 5,
center: latLng(46.879966, -121.726909)
}
};
我对来自 angular 2 的 ngx-leaflet 组件有疑问。 在地图出现时将 *ngif 的状态从 true 更改为 false 并再次从 false 更改为 true 后,不会出现图块渲染。 我该怎么做才能避免这个问题?
这是我的html代码
<button (click)="showMap=!showMap">toggle</button>
<div *ngif="showMap">
<div [style.height.px]="mapHeight" leaflet
(leafletClick)="mapOnClick($event)"
[(leafletCenter)]="mapCenter"
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
[leafletLayers]="layers">
</div>
</div>
这是我的打字稿代码
options = {
layers: [
tileLayer('http://tile.openstreetmap.org/...',
{ maxZoom: 18, attribution: '...' })
],
zoom: 12,
center: latLng(35.679966, 51.4)
};
map = null;
onMapReady(map: Map) {
this.map = map;
}
mapOnClick(evt) {
}
对 options
使用 getter。
get options(){
return {
layers: [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
],
zoom: 5,
center: latLng(46.879966, -121.726909)
}
};