角2リーフレット：マップコンテナが既に初期化されています

TSDでリーフレットのTypescript名前空間をインポートしてマップを初期化しましたが、新しいコンポーネント（マップを含む）をインスタンス化するたびにマップを再初期化する際に問題があります。角2リーフレット：マップコンテナが既に初期化されています

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回呼び出されます。私は以前はそれを呼び出すためにサービスを使用していました。これは空白のページなので、このコンポーネントを直接呼び出しています。

UPDATE 2：それは、この問題https://github.com/angular/angular/issues/6782 に関係しているように、任意の既知の回避策はありますが？

出典

2016-09-27 Ismail H

divまたはmymapをクラスのプライベートメンバーに記録し、そのメンバーがundefinedの場合にのみマップを初期化することができます。

しかし、コンポーネントに複数のインスタンスがある場合は、まだ問題が発生する可能性があります。シャドーDOMが同じIDを持つdivを持つコンポーネントをどのように処理するのか正確には分かりません。

リーフレットでマップコンテナを初期化する前に、マップコンテナが空であるかどうかをまずチェックしてください。

出典

2016-09-27 16:20:03 ghybs

私はHTMLを追加しました。メンバーは存在しないので決して定義されません。内部にコンテンツがあるかどうかを確認するためにいくつかのチェックを行うことはできますが、それを行うには角度的な方法であるかどうかはわかりません。シャドウDOMが何であるかわかりません。私はそれを見てみましょう。 –

この解決法は私のためには機能しませんでした。新しいコンポーネントをインスタンス化すると、コンストラクタとngnit関数の両方が再実行されます。彼らは両方ともプライベートメンバーが毎回未定義であると言うので、エラーは依然として発生します。 – carpiediem

@carpiediemあなたはそれに興味があるかもしれません：http://stackoverflow.com/questions/42428251/initializing-leaflet-map-in-angular2-component-after-dom-object-exists/42431059#42431059 – ghybs

また、マップの実装のためにこれを試すことができます。 https://angular-maps.com/

出典

2016-09-27 16:31:06 Manish

Googleマップの代わりにOSMを使用する方法はありますか？ –

角2リーフレット：マップコンテナが既に初期化されています

答えて

関連する問題