Angular SSR中使用Transfer State实现服务端向客户端传值失败求助

你的代码核心问题是服务端仅声明了MY_DATA依赖，但未将数据写入TransferState，导致客户端无法读取到对应内容。以下是修正后的完整实现方案：

1. 修正app.component.ts逻辑 #

需要注入MY_DATA依赖，同时通过环境判断区分服务端/客户端行为：服务端将数据存入TransferState，客户端从TransferState读取数据。

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const STATE_KEY = makeStateKey<any>('MY_DATA');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myData: any;

  constructor(
    private transferState: TransferState,
    @Inject('MY_DATA') private serverData: any,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit(): void {
    // 服务端环境：将数据写入TransferState
    if (isPlatformServer(this.platformId)) {
      this.transferState.set(STATE_KEY, this.serverData);
      this.myData = this.serverData; // 服务端直接使用数据
    } else {
      // 客户端环境：从TransferState读取数据
      this.myData = this.transferState.get(STATE_KEY, null);
      // 读取后清除状态，避免冗余存储
      this.transferState.remove(STATE_KEY);
    }
    console.log(this.myData);
  }
}

2. 保留server.ts的依赖配置 #

你当前server.ts中声明MY_DATA依赖的代码是正确的，无需修改：

server.get('*', (req: any, res) => {
  res.render(indexHtml, { 
    req, 
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      { provide: 'MY_DATA', useValue: { message: 'Hello from server!' } }
    ] 
  });
});

关键注意事项 #

• 必须用isPlatformServer区分运行环境，避免客户端重复写入TransferState
• TransferState的key需保持服务端、客户端完全一致（此处为MY_DATA）
• 客户端读取完成后调用remove()清理状态，减少不必要的内存占用

内容的提问来源于stack exchange，提问作者Calvin Care