一. 介绍
本文展示了如何在 SharePoint Framework (SPFx) 应用中读取 SharePoint TermStore 数据。由于 SharePoint TermStore 没有直接的 REST API 支持，我们将使用传统的 JSOM 方法来读取 TermStore 数据，并在 SPFx Web 部件中实现这一过程。
二. 实现步骤
虽然 SPFx 直接提供了用户上下文而无需编写代码，但要访问 TermStore，我们仍需要使用传统的 SP.PageContext 信息。接下来，我们将通过 SPComponentLoader 加载 _spPageContextInfo 和 Termsets，在所有新的 SPFx 环境中实现这一功能。
以下实现适用于所有类型的 JS 框架，这些框架都受到 SharePoint Framework Web 部件的支持。
1. 配置 tsconfig.json
首先，打开你的 SPFx Web 部件项目中的 tsconfig.json 文件，确保添加 "Microsoft-ajax" 和 "SharePoint" 类型，如下所示：
"types": [
"webpack-env",
"microsoft-ajax",
"sharepoint"
]
代码说明：
-
webpack-env：支持 Webpack 环境的类型定义。 -
microsoft-ajax：引入 Microsoft Ajax 的类型定义。 -
sharepoint：引入 SharePoint 的类型定义。
2. 更新 package.json
接下来，通过 package.json 文件将所需的节点模块包添加到你的项目中。打开文件，添加 Microsoft-ajax 和 SharePoint 的依赖项，如下所示：
"@types/microsoft-ajax": "0.0.33",
"@types/mocha": ">=2.2.33 <2.6.0",
"@types/sharepoint": "^2013.1.6"
代码说明：
-
@types/microsoft-ajax：Microsoft Ajax 的类型定义。 -
@types/mocha：Mocha 测试框架的类型定义。 -
@types/sharepoint：SharePoint 的类型定义。
然后，打开 npm 命令提示符，确保终端指向你的项目目录，并通过以下命令恢复新增的依赖项：
npm install
命令说明：
-
npm install：安装package.json文件中列出的所有依赖项。
3. 配置 webpart.ts
最后，前往 webpart.ts 文件，该文件位于以下位置：
\\{solutiondirectory} > src > webparts > {webpartName}\{solutionName}WebPart.ts
在这里，你将向 DOM 元素添加 HTML 代码。接下来，需要添加引用脚本以获取 SP.PageContext。脚本需要按照正确的顺序加载，因为一个脚本依赖于另一个脚本。
要加载这些脚本，我们将使用 SPComponentLoader.loadScript 方法，在 SPFx Web 部件的 OnInit() 方法中加载以下 JS 参考文件：
-
init.js -
MicrosoftAjax.js -
SP.Runtime.js -
SP.js -
SP.Taxonomy.js
请参考以下代码片段：
protected onInit(): Promise<void> {
let siteColUrl = this.context.pageContext.site.absoluteUrl;
SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {
globalExportsName: '$_global_init'
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', {
globalExportsName: 'Sys'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.taxonomy.js', {
globalExportsName: 'SP'
});
})
.then((): void => {
let spContext: SP.ClientContext = new SP.ClientContext(siteColUrl);
let taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(spContext);
let termStore = taxSession.getDefaultSiteCollectionTermStore();
let termGroups = termStore.get_groups();
let termGroup = termGroups.getByName("People");
let termSets = termGroup.get_termSets();
this.loadDepartment(termSets, spContext);
});
return super.onInit();
}
代码说明：
-
SPComponentLoader.loadScript：加载指定的 JavaScript 文件。 -
spContext：初始化 SharePoint 客户端上下文。 -
taxSession：获取 Taxonomy 会话。 -
termStore：获取默认站点集合的 TermStore。 -
termGroups：获取 TermStore 中的所有组。 -
termGroup：获取名为 "People" 的 TermGroup。 -
termSets：获取指定 TermGroup 中的所有 TermSet。
4. 加载特定的 TermSets
现在，我们可以加载特定的 TermSets。请参见以下代码片段，用于加载 “Department” TermSets，并使用 spPageContext 的加载和执行方法。
private loadDepartment(termSets: SP.Taxonomy.TermSetCollection, spContext: SP.ClientContext) {
let termSet = termSets.getByName("Department");
let terms = termSet.getAllTerms();
spContext.load(terms);
spContext.executeQueryAsync(function () {
var termsEnum = terms.getEnumerator();
let termDepartment: any[] = [];
while (termsEnum.moveNext()) {
var spTerm = termsEnum.get_current();
termDepartment.push({
label: spTerm.get_name(),
value: spTerm.get_name(),
id: spTerm.get_id()
});
}
window['termDepartment'] = termDepartment;
});
}
代码说明：
-
termSets.getByName("Department")：获取名为 "Department" 的 TermSet。 -
termSet.getAllTerms()：获取 TermSet 中的所有术语。 -
spContext.load(terms)：加载术语数据。 -
spContext.executeQueryAsync：异步执行查询。 -
terms.getEnumerator()：获取术语枚举器。 -
termDepartment.push({ ... })：将术语信息存储到termDepartment数组中。 -
window['termDepartment']：将结果存储到全局变量中，以便在 Angular 代码中访问。
5. 在 Angular 中读取 TermSets
在 Angular 代码中，你可以通过以下代码片段读取 TermSets 数据：
let termDepartmentList: any[] = window['termDepartment'];
代码说明：
-
window['termDepartment']：从全局变量中获取 TermSets 数据。
三. 总结
本文讨论了如何通过使用 JSOM Page Context 在 SharePoint Framework (SPFx) 中加载 SharePoint TermStore（管理的元数据），并与 Angular 4 集成。在下一篇文章中，我将解释如何从 SPFx Web 部件中添加/编辑 TermStore 值。