如何使用Angular服务端渲染的TransferStateService

假设我们使用AngularUniversal开发了一个服务端渲染的Angular应用，它会消费第三方的RestfulAPI。上述场景分为以下六个步骤：用户到部署Node.js服务器与Angular服务端应用发起页面请求Node.js调用第三方RestfulAPI，第三方RestfulAPI返回结果。此结果用于呈现最终页面。服务器端呈现的页面在Angular中返回给浏览器。在浏览器中引导，再次调用RestfulAPI。RestfulAPI返回给浏览器，Angular客户端应用程序将数据重新渲染到视图中。我们可以通过创建TransferState服务来提高应用程序的效率，该服务是在Node.js服务器和浏览器中呈现的应用程序之间交换的键值注册表。我们将通过HTTP_INTERCEPTOR机制来使用它，该机制将驻留在HttpClient服务中，并将处理请求和响应。新建一个类来实现HttpInterceptor接口定义的拦截方法：@Injectable({providedIn:'root'})>>只要对HttpClient服务进行任何API调用，就会调用此方法。为简单起见，我们只为GET方法启用TransferState：if(request.method!=='GET'){returnnext.handle(request);我们根据GET请求的URL生成一个密钥。我们将使用键值对来存储或检索请求响应，具体取决于请求是在服务器端还是浏览器端处理：constkey:StateKey=makeStateKey(request.url);区分服务器和浏览器在服务器环境中，我们使用@angular/common库中的isPlatformServer方法和PLATFORM_ID来注入token：if(isPlatformServer(this.platformId)){//serverSide}else{//browserSide}当服务器被渲染时，我们将API的结果写入到TransferState注册表：.set(key,(>event).body);}));在浏览器端代码中，我们要检查给定HTTP请求的响应是否已驻留在传输状态注册表中。如果存在，我们直接从注册表中提取值，并清除注册表以便将来的调用可以存储新数据并将响应返回给调用者。当且仅当注册表中不存在给定键时，我们才会在客户端上下文中执行HTTP调用。else{conststoredResponse=this.transferState.get(key,null);if(storedResponse){constresponse=newHttpResponse({body:storedResponse,status:200});this.transferState.remove(key);返回（响应）；}else{returnnext.handle(request);}}