使用 Angular Transfer State 的具体示例

前端

2024-02-11 02:31:23

在深入探讨 Angular Transfer State 之前，让我们先用一个具体的例子来说明它的强大功能。

假设我们有一个天气应用程序，其侧边栏中显示了一个城市列表。此列表由服务器在呈现页面之前生成，这意味着它会在首次页面加载时闪烁。要解决此问题，我们可以利用 Angular Transfer State。

Transfer State 的强大之处

Transfer State 允许我们在服务器端预取和预渲染应用程序状态。这对于消除首次加载时的闪烁至关重要，因为它消除了在客户端重新请求数据的延迟。

实施 Transfer State

要在我们的天气应用程序中实施 Transfer State，我们需要进行以下步骤：

安装依赖项：

npm install @angular/platform-server @angular/platform-browser --save

导入 TransferState 模块：

import { NgModule } from '@angular/core';
import { TransferStateModule } from '@angular/platform-browser';

@NgModule({
  imports: [TransferStateModule]
})
export class AppModule { }

创建 TransferState 服务：

import { TransferState, makeStateKey } from '@angular/platform-browser';

const CITY_LIST_KEY = makeStateKey('cityList');

@Injectable()
export class TransferStateService {
  constructor(private transferState: TransferState) { }

  getCities(): string[] {
    return this.transferState.get(CITY_LIST_KEY, []);
  }

  setCities(cities: string[]): void {
    this.transferState.set(CITY_LIST_KEY, cities);
  }
}

获取和设置城市列表：
- 在服务器端，我们从数据库中获取城市列表并将其存储在 Transfer State 中：
```
this.transferStateService.setCities(cities);
```
- 在客户端，我们从 Transfer State 中检索城市列表并将其显示在侧边栏中：
```
const cities = this.transferStateService.getCities();
```