DOM 对象存在后，在 angular2 组件中初始化传单地图 [英] Initializing leaflet map in angular2 component after DOM object exists

问题描述

我目前正在尝试在有角度的材料 2 tab-group 中创建传单地图，如下所示

I'm currently trying to create a leaflet map inside an angular material2 tab-group as below

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:
      '&copy; <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'
  }
}

`，})出口类应用{名称:字符串；构造函数(){this.name = 'Angular2'}}

https://plnkr.co/edit/dLwhv3XoMWMYFkqztkuR?p=preview

https://plnkr.co/edit/dLwhv3XoMWMYFkqztkuR?p=preview

不幸的是，当它尝试在组件中创建地图时，它会抛出一个错误，指出地图容器尚不存在.我的解释是代码在创建 DOM 对象之前正在运行.

What is the correct way of creating the map such that the code is called when the DOM object exists??

创建地图以便在DOM对象存在时调用代码的正确方法是什么?

解决方案

推荐答案

看起来直接引用地图容器元素(通过 @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); } }

Updated Plunk: https://plnkr.co/edit/HGWb3J1f5HL8shFW9EUN?p=preview

更新的 Plunk:https://plnkr.co/edit/HGWb3J1f5HL8shFW9EUN?p=preview

这篇关于DOM 对象存在后，在 angular2 组件中初始化传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！