美文网首页
Angular8与App交互

Angular8与App交互

作者: Mark_ | 来源:发表于2020-08-07 17:44 被阅读0次

    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的感觉
    

    相关文章

      网友评论

          本文标题:Angular8与App交互

          本文链接:https://www.haomeiwen.com/subject/ctfqdktx.html