Angular8与App交互

JS与App交互得例子太多了，这里就不多说了，这里记录Angular2+与App交互遇到的两个问题

1、回调方法挂载

当App端调用JS代码时，由于Angular用TypeScript语言,编译后方法名、类名已不复存在。为了解决找不到该方法问题，在TS在中将方法挂载在Window对象上

TS挂载
window['AppComponent'][bridgeName] = func
App调用
window['AppComponent'][bridgeName]()

Angular调用App 可以直接写在TS中如下

  callIOS(params: string) {
    try {
      window['webkit'].messageHandlers.callRouter.postMessage(params)
    } catch (e) {
      console.log(e)
    }
  }

  callAndroid(params: string) {
    try {
      window['bridge'].callRouter(params)
    } catch (e) {
      console.log(e)
    }
  }

2、方法刷新异常、路由跳转异常

由App端发调用JS事件，浏览器处理为异步事件。页面会出现无法跳转、数据刷新一半后停止等异常问题。

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

引入ngZone

// 不检查变更
this.zone.runOutsideAngular(() => {
      
});
// 检查变更
this.zone.run(() => {
　　this.router.navigateByUrl(uri)).then()
});
// 
this.zone.runOutsideAngular(() => {
    // 处理完后检查变更
    this.zone.run(() => {
　　
    });
});

window['AppComponent'][bridgeName] => {
     this.zone.run(() => {
　　 // App传来的参数触发变更检测 页面刷新写在这里 少量数据可能不会造成页面渲染不完全的问题
     });
}
// 有一种使用GCD的感觉