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

Question

我正在开发一个项目，其中 UI 已经用 Angular 开发。我们的要求是将 UI 加载到 Android webview 中。现在我们的 UI 需要来自主机 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对象，而是提供您自己的依赖注入提供程序来返回引用。一旦你的方法奏效，这可能是一次很好的重构。