我目前正在尝试在一个角度材料2tab-group
内创建一个单张地图,如下所示
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { MaterialModule } from '@angular/material';
import { Component, OnInit, OnDestroy } from '@angular/core';
import 'leaflet';
@Component({
selector: 'minimap',
template: `<div #minimap [id]="id" class=leaflet-map></div>`
})
export class MiniMap implements OnInit, OnDestroy {
map: L.Map = null;
id: string;
constructor() {
this.id = "map" + Date.now();
}
ngOnInit() {
this.map = L.map(this.id).setView([54.5, -115.0], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
}
ngOnDestroy() { }
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<md-tab-group>
<md-tab label="tab 1">
tab 1 content
</md-tab>
<md-tab label="tab 2">
tab 2 content
</md-tab>
<md-tab label="map tab">
<minimap></minimap>
</md-tab>
</md-tab-group>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}
https://plnkr.co/edit/dLwhv3XoMWMYFkqztkuR?p=preview
不幸的是,当它试图在组件中创建映射时,会抛出一个错误,指出映射容器还不存在。我的解释是,在创建dom对象之前,代码当前正在运行。
创建映射以便在dom对象存在时调用代码的正确方法是什么??
最佳答案
看起来直接引用map container元素(通过@ViewChild
)没有问题。
import {Component, ViewChild} from '@angular/core';
import 'leaflet';
@Component({
selector: 'minimap',
template: `<div #mapDiv></div>`
})
export class MiniMap implements OnInit {
@ViewChild('mapDiv') mapContainer;
ngOnInit() {
this.map = L.map(this.mapContainer.nativeElement);
}
}
更新后的plunk:https://plnkr.co/edit/HGWb3J1f5HL8shFW9EUN?p=preview
但是,似乎需要在显示选项卡后(至少是第一次)重新初始化映射大小。参见Data-toggle tab does not download Leaflet map