Inicializando o mapa do folheto no componente angular2 após a existência do objeto DOM
Atualmente, estou tentando criar um mapa de folheto dentro de um material angular2tab-group
como abaixo
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
Infelizmente, quando tenta criar o mapa no componente, gera um erro dizendo que o contêiner do mapa ainda não existe. Minha interpretação é que o código está em execução no momento antes da criação do objeto DOM.
Qual é a maneira correta de criar o mapa, de modo que o código seja chamado quando o objeto DOM existe?