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

【问题标题】：How to call Angular 6 Typescript function from android app using WebView?如何使用 WebView 从 Android 应用程序调用 Angular 6 Typescript 函数？
【发布时间】：2018-10-12 06:04:17
【问题描述】：

我正在从事一个已经在 Angular 中开发 UI 的项目。我们的要求是将该 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 的脚本标签中，而不是在 angular typescript 中。

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

【问题讨论】：

你能做到吗？

标签： android angular cordova cross-platform angular6

【解决方案1】：

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

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

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

【讨论】：