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的感觉
网友评论