0

我使用 TransferState API 创建了一个 ApiService 来缓存 wordpress 中的数据：

get(url, id) {
  const key = makeStateKey(id);
  if (this.transferState.hasKey(key)) {
    const item = this.transferState.get(key, null);
    return of(item);
  } else {
    return this.http.get(url).pipe(
      map(items => {
        this.transferState.set(key, items);
        return items;
      })
    );
  }
}

然后我用它来获取数据：

this.apiService.get(environment.url + '/wp-json/wp/v2/posts').subscribe(res => {
  this.posts = res;
});

这很好用，并且在运行时，第一次调用 API，然后总是缓存第二次。

静态生成时：

/index.html

<script id="my-app-state" type="application/json">
  <!-- top level page data -->
</script>

/posts/index.html

<script id="my-app-state" type="application/json">
  <!-- top level page data -->
  <!-- posts data -->
</script>

据我了解，原因是因为你登陆了一个真正的静态 index.html 文件，其中包含导航时的所有后续页面都没有加载 .html 文件，它们实际上是 html5 路由/帖子。

所以问题是，如何让 TransferState 缓存使用静态生成的 /posts/index.html 文件？

潜在的解决方案：

  • 预先加载所有数据（有效，但每个页面为 1.1MB）
  • 将数据放入可以通过ajax加载的静态文件
  • 禁用 html5 路由，因此用户使用正确的脚本标签点击静态 .html 文件
  • 一些无证的角度解决方案？

静态生成的演示：

https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/

静态生成源：

https://github.com/kmturley/angular-universal-wordpress-cms/tree/gh-pages/frontend/dist/browser

完整的代码库在这里：

https://github.com/kmturley/angular-universal-wordpress-cms

4

1 回答 1

1

我设法使用解决方法解决了这个问题。我创建了一个新的 TransferState JSON，它以 JSON 格式返回数据，可以在多个页面之间共享：

export function serializeTransferStateFactory(
    doc: Document, appId: string, transferStore: TransferState) {
  return () => {
    return JSON.parse(transferStore.toJson());
  };
}

https://github.com/kmturley/angular-universal-google-apis/blob/master/src/app/shared/transfer_state_json.ts

然后修改renderModuleFactory，分别返回html和data：

const callbacks = moduleRef.injector.get(BEFORE_APP_SERIALIZED, null);
let data = null;
if (callbacks) {
  for (const callback of callbacks) {
    try {
      data = callback();
    } catch (e) {
      // Ignore exceptions.
      console.warn('Ignoring BEFORE_APP_SERIALIZED Exception: ', e);
    }
  }
}
const output = platformState.renderToString();
platform.destroy();
return {
  output: output,
  data: data
};

https://github.com/kmturley/angular-universal-google-apis/blob/master/utils.ts#L53

以便可以将其保存到 prerender.ts 中的 .json 文件中：

previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
  document: index,
  url: route,
  extraProviders: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
})).then((res: { output: string, data: object }) => {
  // write html file
  writeFileSync(join(fullPath, 'index.html'), res.output);

  // write json files from TransferState objects
  Object.keys(res.data).forEach(item => {
    writeFileSync(join(jsonPath, item + '.json'), JSON.stringify(res.data[item]));
  });
});

https://github.com/kmturley/angular-universal-google-apis/blob/master/prerender.ts#L53

您可以在此处查看使用 json 的演示静态版本：

https://kimturley.co.uk/angular-universal-google-apis/dist/browser/

和这里的源代码：

https://github.com/kmturley/angular-universal-google-apis

于 2018-07-14T01:59:47.180 回答