使用 Angular Transfer State 的一個具體例子详情 - javascript,前端,typescript,angular,angularjs 註銷日志

Using TransferState API in an Angular v5 Universal App

讓我們用一個具體的例子來説明這篇文章。我們有一個天氣應用程序，在其側邊欄中顯示城市列表。當您單擊城市名稱時，該應用程序會顯示該城市的當前天氣。

因為我們希望我們的應用程序是可抓取和可索引的，所以我們使它通用：城市頁面在服務器上呈現，存儲為 HTML 文件並由 HTTP 服務器提供服務。這些頁面將包含瀏覽器應用程序，因此用户可以在加載第一頁後使用 Angular 的強大功能繼續在應用程序中導航。

您可以按照以下步驟嘗試這個簡單的示例。

使用下列命令將這個例子 clone 到本地：

$ git clone https://github.com/feloy/ng-demo-transfer-state
$ cd ng-demo-transfer-state
$ git checkout initial

構建程序：

$ npm install
$ ng build -prod
$ ng build -prod -app server --output-hashing=none

為不同的城市創建不同的頁面：

$ node render-page.js /Paris > dist/Paris
$ node render-page.js /London > dist/London
$ node render-page.js /San%20Fransisco > 'dist/San Fransisco'

您現在可以使用首選的 HTTP 服務器為 dist 目錄提供服務。

現在，如果您直接訪問頁面 http://your-domain/Paris（這是訪問者來自搜索引擎的典型情況），您可以觀察到頁面閃爍 - 這是因為內容已經存在並且已經下載到本地了，然後瀏覽器應用程序會重新加載並再次顯示。

TransferState to the rescue

Angular v5 中引入的 TransferState API 可以幫助解決這種情況。它可以將數據從應用程序的服務器端傳輸到瀏覽器應用程序。
為此，服務器應用程序將在它生成的 HTML 頁面中添加我們要傳輸的數據。
包含在此生成的 HTML 頁面中的瀏覽器應用程序將能夠讀取此數據。

在這個分支查看解決方案。

$ git checkout transfer-data

首先在服務器應用上導入 ServerTransferStateModule，在瀏覽器應用上導入 BrowserTransferStateModule：

// src/app/app.server.module.ts
import {ServerTransferStateModule} from '@angular/platform-server';
[...]
@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}
// src/app/app.module.ts
import { BrowserTransferStateModule } from '@angular/platform-browser';
[...]
@NgModule({
  declarations: [
    AppComponent, CityComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-demo-transfer-state-app' }),
    BrowserTransferStateModule,
  [...]

現在，在為組件提供數據的解析器中，我們可以使用 TransferState API：

在服務器上，我們首先註冊 onSerialize 以提供我們將下載的數據，然後我們從我們的數據提供者那裏獲取數據，這裏是一個 HTTP GET 請求。
在瀏覽器上，我們使用get方法來獲取server提供的數據，我們直接提供這些數據。我們還從傳輸狀態中刪除了提供的數據，因此頁面的重新加載將不再使用提供的數據。

我們可以通過調用 hasKey 方法來檢測我們是在服務器上還是在瀏覽器應用程序上。此方法僅在瀏覽器中返回 true。

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CityWeather> {
    const found = this.transferState.hasKey(RESULT_KEY);
    if (found) {
      const res = Observable.of(this.transferState.get<CityWeather>(RESULT_KEY, null));
      this.transferState.remove(RESULT_KEY);
      return res;
    } else {
      this.transferState.onSerialize(RESULT_KEY, () => this.result);
      const name = route.params['city'];
      return this.http.get<CityWeather>('https://api.openweathermap.org/data/2.5/weather?q=' + name + '&units=metric&APPID=' + this.key)
        .do(result => this.result = result);
    }
  }

因為我們是調用remove方法移除提供的數據，所以瀏覽器顯示的以下頁面會調用onSerialize方法，但是這個方法沒有效果，因為toJson只在服務端調用。

一個更清晰的解決方案是使用 isPlatformServer 和 isPlatformBrowser 方法來檢測平台並採取相應的行動。

更多Jerry的原創文章，盡在："汪子熙":