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

我正在从事一个项目，其中UI已经在Angular中开发。 我们的要求是将该UI加载到Android webview中。现在，我们的用户界面需要来自主机android设备的一些信息，如可扩展设备列表或wifi列表。所以我需要在android原生代码和Angular Typescript代码之间架起一座桥梁。 到目前为止，通过在typescript中创建一个接口，我可以从typescript代码调用Android代码，如下所示：

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

@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();
        }
    });
}

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

我在Android中实现的相同功能如下：

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

@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();
        }
    });
}

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

我可以再次调用javascript函数，如下所示：

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

@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();
        }
    });
}

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

我已将上述sampleFunction（）声明为index.html的脚本标记，而不是angular typescript

我的问题是，如何调用像cordova插件那样用typescript编写的函数。（注：我不能在我的项目中使用cordova）。我们可以将Angular typescript代码的回调传递给android并调用该函数吗？

---

到目前为止，我所了解的是，我必须从Android本机代码调用javascript函数，在javascript代码中，我必须调用Typescript代码。这是正确的方法吗？有人能告诉我什么是正确的方法吗，因为我对Angular和javascript还不熟悉。

不要被TypeScript搞糊涂了：在运行时，web应用程序（Angular）将完全以javascript的形式运行。TypeScript在构建阶段传输到常规JavaScript代码。 因此，要从Android调用（TypeScript/JavaScript）Angular代码，您需要做的是确保它是全局可访问的。这可以通过使用

窗口

对象并将函数附加到角度代码中来实现。 比如说

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

---

为了获得更好的（可测试的）体系结构，我建议您不要直接引用

窗口

对象，而是提供您自己的依赖项注入提供程序来返回引用。一旦你的方法奏效，这可能是一个很好的重构。

你能做到吗？