javascript - UWP - Angular 集成

Question

最近我一直在尝试将 Google 的 Angular 5 构建集成到 Visual Studio 中基于 JavaScript 的通用 Windows 应用程序项目中，不幸的是没有取得太大的成功。大多数情况下无法在已编译的 Angular JavaScript 代码和我想使用 UWP 命名空间的 JavaScript 文件之间实现有效通信。

我当前的文件夹结构如下所示: folder structure

前端显示得很好，尽管如前所述，我很难弄清楚如何将它与负责处理 IO 操作的代码(位于 main.js 中)集成。我认为使用已经编译的 Angular 项目是不可能的，因此我的问题是 - 我如何从 Angular 组件中做到这一点？

Answer 1

我对“编译的 Angular”部分有点困惑，但如果你在 UWP 项目中有一个 Angular 应用程序，大部分 UWP API 都可以通过 Windows 命名空间访问，一些来自WinJS，因此在 Angular 服务/组件中，您可以创建如下函数:

windowsFileSavePicker(source, successCB, errorCB) {
    var savePicker = Windows.Storage.Pickers.FileSavePicker();
    //savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.downloads;
    savePicker.fileTypeChoices.insert(source.mimeType, [source.fileName.replace(/^.*([.][^.]*)$/, '$1')]);
    savePicker.suggestedFileName = source.fileName;

    savePickerHandler = fileSavePickerHandler.bind(undefined, source, successCB, errorCB);

    if (platform.isWindowsPhone()) { // Win 8.1
        Windows.UI.WebUI.WebUIApplication.addEventListener("activated", savePickerHandler);
        savePicker.pickSaveFileAndContinue();
    }
    else // UWP
        savePicker.pickSaveFileAsync().then(savePickerHandler);
}

在几个 Cordova 应用程序中，我使用了这样的片段(例如，从 Angular 的 main.js 内部):

if (window.WinJS && window.WinJS.Application) {
    window.WinJS.Application.onbackclick = function () {
        backButtonBehavior();
        return true; // return true to prevent app closing
    };
}

这可能有助于在浏览器(或任何没有 UWP API 的地方)中测试应用的 Angular 部分。

我从来不需要从 Angular 应用程序内部“通信”到应用程序的外部 UWP 部分(因为我在 Angular 应用程序内部执行所有操作)，但您可以创建一个界面或“运输” UWP 部分中的对象，将其附加到全局命名空间(window；或者也许有一个 UWP api 用于此？)，然后通过全局命名空间从 Angular 应用程序内部访问它。