大佬教程收集整理的这篇文章主要介绍了使用 Angular Transfer State 的一个具体例子,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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(这是访问者来自搜索引擎的典型情况),您可以观察到页面闪烁 - 这是因为内容已经存在并且已经下载到本地了,然后浏览器应用程序会重新加载并再次显示。
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:
我们可以通过调用 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的原创文章,尽在:"汪子熙":
以上是大佬教程为你收集整理的使用 Angular Transfer State 的一个具体例子全部内容,希望文章能够帮你解决使用 Angular Transfer State 的一个具体例子所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。