Office.js：如何从使用 Angular CLI 生成的函数文件中调用函数

Question

我使用 angular-cli 创建了一个新项目，并将 ng-office-ui-fabric 和依赖项添加到项目中。我在 index.html 中添加了 https://appsforoffice.microsoft.com/lib/1/hosted/office.js 并将 polyfills 添加到 angular.json 中，一切都很好。

在 Word 中，我可以很好地旁加载加载项，并且我创建的任务窗格被加载并且正在工作。

但在清单中有一个函数文件，它允许功能区上的按钮直接从 function-file.html 调用 javascript 函数。我可以将 js 和 html 文件作为资产添加到项目中，但我想在 TS 中编程，而不是 JS。我认为向项目添加一个页面并定义该组件内的功能也应该可以工作。但是将该页面作为函数文件添加到清单中似乎不起作用。

所以我的问题是，如果 office.js 能够从单独的 html 文件调用 javascript 函数，我将如何从我用 typescript 编写的组件在路由的角度页面上发布相同的函数？我需要将其导出到任何地方吗？是延迟加载吗？为什么它不起作用？还是我应该在 main.ts 中定义这些函数？

Answer 1

从功能区按钮打开的 function-file.html 在与任务窗格完全不同的 Internet Explorer 实例中打开，因此是完全独立的 JavaScript 引擎、执行上下文和会话。他们甚至不共享会话存储。它们只能通过本地存储或一些常见的服务器端数据存储相互通信。

当您为具有自定义功能区按钮的 Office 加载项使用单页框架时，您基本上有两种选择：

(1) 脱离单纯的单页设计，创建一个页面，只作为按钮的启动目标。实际上，这是一个单独的应用程序，托管在与主单页应用程序相同的域中。为简单起见，我推荐此选项。

(2) 在主应用程序中包含您希望功能区启动的功能并为其分配路线。使用路由作为应用清单中函数的 URL。但请注意，如果您这样做，您的单页应用程序的完整第二个实例将加载到由功能区按钮启动的 IE 实例中。必须设计应用程序的启动逻辑，以便当它通过特殊路由启动时，它不会尝试加载它将在任务窗格中加载的标准启动视图。