Angular 2 Leaflet：Map容器​​已初始化

Question

我通过TSD导入传单的Typescript命名空间初始化了一个地图，但每次实例化一个新组件（包含地图）时，我都会重新初始化地图。这是组件的代码：

    import { Component, Input, OnInit} from '@angular/core';

    import { MapDetail } from './map';

    @Component({
        selector:'map-detail',
        templateUrl: 'views/map.html'
    })
    export class MapDetailComponent implements OnInit {
        @Input()   map: MapDetail;

        ngOnInit(): void {

            var div = document.getElementById('map');
            var mymap : L.Map = L.map(div, {
                center: L.latLng(47.137,  1.890),
                zoom: 7,    
                dragging: true,
                [More options ...]
            });

        var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?', {
                minZoom: 3,
                maxZoom: 18,
            });


            tileLayer.addTo(mymap);
        }
    }

HTML：

<div id="mapid"></div>

非常感谢任何想法/提示。

UPDATE ：两次调用ngOnInit。我曾经使用过服务来调用它。现在，由于它是一个空白页面，它正在启动我直接调用此组件。

更新2 ：似乎与此问题有关https://github.com/angular/angular/issues/6782 有没有已知的解决方法？

Answer 1

您只需将div或mymap录制到班级的私人成员中，并仅在该成员为undefined时初始化地图。

但是如果您的页面上有多个该组件的实例，那么您可能仍会遇到问题。我不确定Shadow DOM如何处理具有相同ID的div的组件？

或者在使用Leaflet初始化之前，先检查地图容器是否为空。

Answer 2

你也可以尝试这个来实现地图： https://angular-maps.com/