替代方案是使用 TransferState 和 StateTransferInitializer 来手动管理应用程序的状态转换。这要求我们在应用程序中添加另一个 Provider, StateTransferInitializer,来管理 TransferState。
代码示例:
app.module.ts
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TransferState, StateTransferInitializer } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'my-app' }),
BrowserTransferStateModule
],
providers: [
TransferState,
StateTransferInitializer
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
const NEWS_KEY = makeStateKey('news');
@Component({
selector: 'app-root',
template: `
- {{ newsItem.title }}
`
})
export class AppComponent implements OnInit {
public news: any;
constructor(
private http: HttpClient,
private state: TransferState
) { }
ngOnInit() {
if (this.state.hasKey(NEWS_KEY)) {
this.news = this.state.get(NEWS_KEY, null);
this.state.remove(NEWS_KEY);
} else {
this.http.get('/api/news').subscribe(news => {
this.news = news;
// set the key and value in the transfer state
this.state.set(NEWS_KEY, news);
});
}
}
}