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

Question

我正在开发一个已经在 Angular 中开发 UI 的项目。
我们的要求是将该 UI 加载到 Android webview 中。现在我们的 UI 需要来自主机 android 设备的一些信息，例如 BLE 设备列表或 wifi 列表。所以我需要在 android native 代码和 Angular Typescript 代码之间架起一座桥梁。
到目前为止，我可以通过在 Typescript 中创建一个接口(interface)来从 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插件一样用 typescript 编写的函数。 (PS:我不能在我的项目中使用cordova)。我们可以将 Angular typescript 代码中的回调传递给 android 并以某种方式调用该函数吗？
到目前为止，我了解到我必须从 Android native 代码调用 javascript 函数，并且在该 javascript 代码中我必须调用 Typescript 代码。这是正确的方法吗？有人可以建议什么是正确的方法，因为我是 Angular 和 javascript 的新手。

Answer 1

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

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

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