上篇说到我要做地图搜索功能,angular引用第三方js插件遇到的问题_Bonny雨曦的博客-CSDN博客
我将地址搜索出来之后还需要将搜索到的经纬度通过rpc发送给后端做一些处理,所以我需要js和ts之间有数据通讯,也就是js需要把获取到的经纬度返回给ts。
我想利用localStorage来实现。于是我在js里用了
localStorage.setItem('leafletSearch',[cord])
在ts用了
window.addEventListener('storage', _ => this.readLocalStorage())
发现根本监听不到。后来多番百度之后才知道,在同一个页面内,localStorage改变的时候这样是监听不到的,需要在不同页面这样写才可以听得到。
经过查阅资料,我找到了这个
于是我在js中重写了事件,将事件的名字改为leafletMap,要拿到的值放到event里的leafletSearch中
let event = new Event("leafletMap");
event.leafletSearch = [cord[1], cord[0]];
window.dispatchEvent(event);
其中window.dispatchEvent(event);是抛出事件。
然后在ts中通过监听leafletMap来拿到数据。这里不懂为什么直接event.leafletSearch是找不到leafletSearch的,因为我这个ts是个子组件,所以我通过leafletSearch将整个event发送给了父组件。
window.addEventListener('leafletMap', event => {
this.leafletSearch.emit(event)
}, false)
在父组件中我再通过.就能获取到数据了。
子组件要定义一下这个事件的输出
然后在父组件的HTML页面绑定一下方法
<app-leaflet-map [mapId]="mapId" [is_edit]="is_edit" (leafletSearch)="get_leafletSearch($event)" (address)="get_address($event)" [is_gps]="is_gps"> </app-leaflet-map>
然后在父组件的逻辑处理的ts文件中获取数据
以上就完成了从js中获取到数据,然后在ts中处理逻辑~