在Angularv5通用应用程序中使用TransferStateAPI让我们用一个具体示例来说明本文。我们有一个天气应用程序，它在侧边栏中显示城市列表。当您点击城市名称时，该应用程序会显示该城市的当前天气。因为我们希望我们的应用程序是可抓取和可索引的，所以我们使它通用：城市页面在服务器上呈现，存储为HTML文件并由HTTP服务器提供服务。这些页面将包含浏览器应用程序，因此用户可以使用Angular的强大功能在第一个页面加载后继续在应用程序内导航。您可以按照以下步骤尝试这个简单的示例。使用以下命令在本地克隆此示例：$gitclonehttps://github.com/feloy/ng-demo-transfer-state$cdng-demo-transfer-state$gitcheckout初始构建程序：$npminstall$ngbuild-prod$ngbuild-prod-appserver--output-hashing=none为不同的城市创建不同的页面：$noderender-page.js/Paris>dist/Paris$noderender-page.js/London>dist/London$noderender-page.js/San%20Fransisco>'dist/SanFransisco'您现在可以使用您首选的HTTP服务器为dist目录提供服务。现在，如果您直接访问页面http://your-domain/Paris（对于来自搜索引擎的访问者来说，这是典型的），您可以观察到页面闪烁-这是因为内容已经存在并且已在本地下载，然后浏览器应用程序将重新加载并再次显示。TransferState来拯救Angularv5中引入的TransferStateAPI可以帮助解决这种情况。它可以将数据从应用程序的服务器端传输到浏览器应用程序。为此，服务器应用程序将在它生成的HTML页面中添加我们要传输的数据。此生成的HTML页面中包含的浏览器应用程序将能够读取此数据。请参阅此分支中的解决方案。$gitcheckouttransfer-data首先在服务器应用程序上导入ServerTransferStateModule，在浏览器应用程序上导入BrowserTransferStateModule：//src/app/app.server.module.tsimport{ServerTransferStateModule}from'@angular/platform-server';[.。-browser';[...]@NgModule({declarations:[AppComponent,CityComponent],imports:[BrowserModule.withServerTransition({appId:'ng-demo-transfer-state-app'}),BrowserTransferStateModule,[...]现在，在为组件提供数据的解析器中，我们可以使用TransferStateAPI：在服务器上，我们首先注册onSerialize以提供我们将下载的数据，然后我们从我们的数据提供者那里获取数据，这里是一个HTTPGET请求，在浏览器上，我们使用get方法获取服务器提供的数据，我们直接提供，我们也将提供的数据从传输状态中移除，所以页面的reload将不再使用提供的数据数据。我们可以通过调用hasKey方法来检测我们是在服务器上还是在浏览器应用程序上。此方法仅在浏览器中返回true。resolve(route:ActivatedRouteSnapshot,state:RouterStateSnapshot):Observable
