UWP - 角度集成答案

【问题标题】：UWP - Angular integrationUWP - 角度集成
【发布时间】：2018-07-20 13:34:15
【问题描述】：

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

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

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

【问题讨论】：

这可能是一个愚蠢的问题，但是您是如何将 Angular 集成到 UWP 项目中的呢？我做不到。
您应该使用组件中的全局 winjs 命名空间单独开发您的 Angular 应用程序，以便访问 UWP 特定的 API（请参阅已接受的答案）。准备好您的应用后，您只需使用 --prod 标志构建它，并将 dist 文件放入您的 uwp 项目的树中，然后使用适当的路径将 .js 文件导入您的主 html。

标签： javascript angular uwp

【解决方案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 应用程序中，我使用了这样的 sn-ps（例如，从 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 应用程序内部访问它。

【讨论】：