angular框架的ts文件怎么和js进行数据通讯

上篇说到我要做地图搜索功能，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中处理逻辑~