如何防止 Angular 在运行时加载内容，因为它已经被 Scully 预渲染了?

Question

我有一个服务，可以从我的Angular应用程序中的无头CMS Cockpit获取数据。我正在使用Scully来预呈现我的页面。它在进行预渲染时效果很好，它可以获取内容构建时间并创建一个静态页面，但是当打开页面时，Angular 会再次加载该数据，尽管它应该来自某种 scully 上下文。

Answer 1

在查看了 scully 的源代码后，我设法在那里找到了一个有用的服务：TransferStateService。因此，我修改了我的服务，以便在从 Cockpit 获取数据的服务中发挥我的优势：

private getCockpitData<T>(path: string): Observable<T> {
const url = `${this.baseApiUrl}${path}`;
const urlHash = btoa(url);
if (isScullyRunning()) {
const headers = new HttpHeaders({ 'Cockpit-Token': environment.cockpit.apiccessToken });
const queryParams = new HttpParams({ fromObject: { lang: 'uk' } });
return this.http
.get<T>(url, { headers, params: queryParams })
.pipe(
tap(data => this.transferStateService.setState<T>(urlHash, data)),
shareReplay(1)
);
}
return this.transferStateService.getState<T>(urlHash).pipe(shareReplay(1));
}

因此，当 scully 运行时，我们获取数据并使用TransferStateService在页面上设置数据，但会产生副作用。否则，当它已经是一个生成的页面时，我们只是从页面中获取数据，而不是执行另一个请求。 然后，任何终结点都可以调用此方法，如下所示：

getHeaderContentData(): Observable<HeaderContent> {
return this.getCockpitData<HeaderContent>('singletons/get/header');
}

因此，当使用服务加载数据时，我的所有组件都将使用相同的接口接收正确的数据，并在内部处理数据的来源。

这里的重要说明：确保您还在某处注入了IdleMonitorService，例如在 AppModule 中，如下所示：

export class AppModule {
// @ts-ignore Property 'idle' is declared but its value is never read.
// IdleMonitorService has to be injected so that the instance of it is created
// which allows scully to track wether angular page became idle in build time
constructor(private readonly idle: IdleMonitorService) {}
}

如果IdleMonitorService没有注入到任何地方，Angular 永远不会创建它的实例，并且 scully 无法跟踪 angular 在预渲染期间何时变得空闲，这会导致更长的构建时间，而且它会错过设置为'generated'window['ScullyIO']，因此isScullyGenerated()将始终在运行时返回false。

编辑：从@scullyio/ng-libIdleMonitorService的0.0.15版本开始，不再需要注入AppModule，现在只需要导入ScullyLibModule。