Как вызвать функцию Angular 6 Typescript из приложения для Android с помощью WebView?

Question

Я работаю над проектом, в котором пользовательский интерфейс уже разработан на Angular.Наше требование - загрузить этот пользовательский интерфейс в веб-браузер Android.Теперь нашему интерфейсу нужна некоторая информация с хост-устройства Android, например, список устройств BLE или список Wi-Fi.Так что мне нужно сделать мост между android нативным кодом и кодом Angular Typescript.До сих пор я могу вызывать код Android из кода машинописи, создавая интерфейс в Typescript следующим образом:

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 и как-нибудь вызвать эту функцию?До сих пор я понимаю, что я должен вызывать функцию javascript из собственного кода Android, а в этом коде javascript я должен вызывать код Typescript.Это правильный подход?Может кто-нибудь, пожалуйста, предложите, каков правильный подход к этому, поскольку я новичок в Angular и javascript.

Answer 1

Не путайте TypeScript: во время выполнения веб-приложение (Angular) будет работать полностью как JavaScript.TypeScript передается на этапе сборки в обычный код JavaScript.Итак, что вам нужно сделать, чтобы иметь возможность вызывать свой (TypeScript / JavaScript) Angular-код из Android, это убедиться, что он доступен для всех.Этого можно достичь, используя объект window и добавив туда свою функцию в своем коде Angular.Например,

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

Чтобы получить лучшую (тестируемую) архитектуру, я предлагаю не напрямую ссылаться на объект window, а вместо этого предоставить свой собственный поставщик внедрения зависимостей, который возвращает ссылку.Это может быть хорошим рефакторингом, когда ваш подход работает.