要在Angular Universal中注入多个实例的TransferState脚本,您可以按照以下步骤操作:
import { Injectable } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
@Injectable()
export class StateService {
constructor(private transferState: TransferState) {}
// 创建一个自定义的状态键
private myAppStateKey = makeStateKey('myAppState');
// 获取TransferState实例
public getTransferState(): any {
return this.transferState.get(this.myAppStateKey, null);
}
// 设置TransferState实例
public setTransferState(state: any): void {
this.transferState.set(this.myAppStateKey, state);
}
}
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { StateService } from './state.service';
import { AppServerModuleNgFactory } from './path/to/app.server.module.ngfactory';
const stateService = new StateService();
stateService.setTransferState({/* 设置初始状态 */});
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./path/to/app.server.module.ngfactory');
renderModuleFactory(AppServerModuleNgFactory, {
document: /* 您的HTML模板 */,
url: /* 当前请求的URL */,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP),
{ provide: StateService, useValue: stateService } // 将StateService注入到Angular Universal
]
}).then(html => {
// 将生成的HTML返回给客户端
});
import { Component, OnInit } from '@angular/core';
import { StateService } from './state.service';
@Component({
selector: 'app-root',
template: `
My App
{{ data }}
`
})
export class AppComponent implements OnInit {
public data: any;
constructor(private stateService: StateService) {}
ngOnInit() {
this.data = this.stateService.getTransferState();
}
}
TransferState
的多个实例。
My App
请注意,每个实例都需要有一个唯一的状态键。在示例代码中,我们使用了makeStateKey
函数来创建一个自定义的状态键myAppStateKey
。
希望这可以帮助到您!