Question

我正在一个已经在Angular中开发UI的项目中。我们的要求是将该用户界面加载到Android Webview中。现在，我们的用户界面需要来自主机android设备的一些信息，例如BLE设备列表或wifi列表。因此，我需要在android本机代码与Angular Typescript代码之间架起一座桥梁。到现在为止，我可以通过在Typescript中创建如下界面来从Typescript代码中调用Android代码：

export class WebAppInterface {
    showToast(toast: String): any;
}

与我在Android中实现的方法相同，

@JavascriptInterface
public void showToast(final String msg) {
    mFragment.getActivity().runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Toast.makeText(mFragment.getContext(), msg, Toast.LENGTH_LONG).show();
        }
    });
}

我能够再次调用javascript函数，如下所示：

mWebView.evaluateJavascript("javascript:sampleFunction()", null);

我已将上面sampleFunction（）声明为index.html的脚本标签，而不是角型脚本。

我的问题是，如何像cordova插件那样调用以打字稿编写的函数。（PS：我不能在项目中使用cordova）。我们可以将Angular打字稿代码的回调传递给android并以某种方式调用该函数吗？到现在为止，我了解到我必须从Android本机代码调用javascript函数，并且在该javascript代码中必须调用Typescript代码。这是正确的方法吗？可以请我提出一些正确的方法，因为我是Angular和javascript的新手。

Answer 1

不要被TypeScript弄糊涂：在运行时，Web应用程序（Angular）将完全作为JavaScript运行。在构建阶段将TypeScript转换为常规JavaScript代码。因此，要能够从Android调用您的（TypeScript / JavaScript）Angular代码，您需要做的就是确保它可以全局访问。这可以通过使用window对象并将功能附加到Angular代码中来实现。例如

window['foo'] = function() ...

为了获得更好的（可测试的）体系结构，我建议您不要直接引用window对象，而应提供自己的依赖注入提供程序来返回引用。一旦您的方法可行，这可能是一个很好的重构。

如何使用WebView从Android应用程序调用Angular 6 Typescript函数？

1 个答案: