如何使一个字符串依赖令牌访问组件?

Question

我正在构建一个使用Angular universal进行服务器端渲染的Angular应用。

我得到了一个字符串依赖令牌作为提供者在server.ts的提供者数组传递

providers: [{ provide: 'MODEL', useValue: process.env.API_MODEL }]

与这个令牌关联的值，我如何使我的组件可以访问它?

如果我进入app.component.ts并执行:

export class AppComponent {
constructor(@Optional() @Inject('MODEL') private model: string) {
console.log('inside app component', this.model)
}
}

在我的终端中，它打印inside app component DELUXE，这是预期的，因为这是存储在.env文件中的内容。但是，当我在浏览器中检查控制台时，它显示为inside app component null。为什么值没有显示在浏览器中?

如果我去掉@Optional()装饰器，我会得到NullInjectionError: No provider for MODEL!错误。

Answer 1

使用transfer状态将数据保存到服务器端。一旦你加载了浏览器，你就可以从传输状态中获取数据。

服务器端接收数据并打印它，但为了在客户端拥有该数据，您必须存储它的传输状态。代码应该像

constructor(
@Optional() @Inject('MODEL') private model: string,
@Inject(PLATFORM_ID) private _platformId: Object,) {
}  
ngOnInit(): void {
if (isPlatformServer(this._platformId)) {
this.transferState.set(makeStateKey('model'), this.model);
} else if (isPlatformBrowser(this._platformId)) {
this.model= this.transferState.get(makeStateKey('model'), null)
}
}