Javascript 传单自定义控件-角度2+；

我需要在Angular2+组件中集成自定义表单控件：

export class HeatMapComponent {
...
  onMapReady(map: L.Map) {
    let div = L.DomUtil.create('div', 'info');
    let info = new L.Control();
    info.onAdd = () => {
      return div;
    };
    info.addTo(map);
  }
} 

以及.hmtl文件，如下所示：

    <div class="map container-fluid"
     leaflet [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     (leafletMapReady)="onMapReady($event)">
</div>

在传单文档中，它是用JS编写的，如下所示：

var info = L.control();info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
}; 
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

var info=L.control（）；info.onAdd=函数（映射）{
this._div=L.DomUtil.create（'div'，'info'）；//使用类“info”创建一个div
这个.update（）；
把这个还给我；
}; 
//方法，我们将使用该方法根据传递的功能属性更新控件
info.update=功能（道具）{
这个._div.innerHTML=‘美国人口密度’+（道具？
''+props.name+'
'+props.density+'people/mi2'
：“悬停在状态上”）；
};
信息地址（地图）；

---

为什么我不能在onMapReady中集成addTo方法？我没有收到任何错误，但地图上没有显示任何内容。

我解决了此问题，解决方案是：

onMapReady(map: leaflet.Map) { 
let div = leaflet.DomUtil.create('div', 'infoControl'); 
let info = new leaflet.Control(); info.onAdd = () => { 
return div; 
   }; 
console.log(div); 
info.addTo(map); 
}

---

您的

onMapReady

函数中的组件有一个输入错误<代码>this.infoControl=L.control应该是

this.infoControl=L.control（）
onMapReady(map: leaflet.Map) { 
let div = leaflet.DomUtil.create('div', 'infoControl'); 
let info = new leaflet.Control(); info.onAdd = () => { 
return div; 
   }; 
console.log(div); 
info.addTo(map); 
}