如何从服务端向Angular注入数据以避免重复查询

1. ASP.NET服务端生成全局预加载数据脚本 #

在返回给客户端的HTML页面（比如Layout视图或对应页面的Razor视图）中，添加一个内嵌脚本，将服务端已查询到的Item数据序列化为JSON并挂载到全局window对象上。确保这部分脚本在Angular应用的<script>标签之前加载，保证Angular初始化时能读取到数据。

示例代码（ASP.NET Razor视图）：

<!-- 在Angular的main.js脚本之前插入 -->
<script>
  window.__PRELOADED_ITEM_DATA__ = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(ViewBag.ItemDetailData));
</script>

这里的ViewBag.ItemDetailData就是服务端查询到的、用于生成OG标签的同一批数据。

2. Angular端创建预加载数据的注入器 #

在Angular 18中，通过InjectionToken和工厂提供者，将全局的预加载数据封装成可注入的服务，让组件/服务能像使用普通Provider一样获取数据。

首先定义一个注入令牌和对应的提供者：

// src/app/core/preloaded-data.token.ts
import { InjectionToken, FactoryProvider } from '@angular/core';
import { Item } from '../models/item.model'; // 替换为你的Item类型定义

export const PRELOADED_ITEM_DATA = new InjectionToken<Item | null>(
  '预加载的Item数据'
);

export const preloadedItemDataProvider: FactoryProvider = {
  provide: PRELOADED_ITEM_DATA,
  useFactory: (): Item | null => {
    // 从全局对象读取数据，类型断言确保编译通过
    return (window as any).__PRELOADED_ITEM_DATA__ || null;
  }
};

然后在app.config.ts中注册这个提供者：

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { preloadedItemDataProvider } from './core/preloaded-data.token';

export const appConfig: ApplicationConfig = {
  providers: [
    preloadedItemDataProvider,
    // 其他提供者...
  ]
};

3. 在组件/服务中使用预加载数据 #

在需要Item数据的组件或服务中，直接注入PRELOADED_ITEM_DATA，优先使用预加载数据；如果预加载数据不存在（比如直接访问客户端路由的极端情况），再发起API请求作为降级方案。

示例组件代码：

// src/app/item-detail/item-detail.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { PRELOADED_ITEM_DATA } from '../core/preloaded-data.token';
import { ItemService } from '../services/item.service';
import { Item } from '../models/item.model';

@Component({
  selector: 'app-item-detail',
  templateUrl: './item-detail.component.html',
  standalone: true,
  imports: []
})
export class ItemDetailComponent implements OnInit {
  itemData: Item | null = null;
  private preloadedData = inject(PRELOADED_ITEM_DATA);
  private itemService = inject(ItemService);

  ngOnInit(): void {
    if (this.preloadedData) {
      // 使用服务端预注入的数据，无需二次请求
      this.itemData = this.preloadedData;
      // 可选：清理全局对象，避免污染
      delete (window as any).__PRELOADED_ITEM_DATA__;
    } else {
      // 降级逻辑：直接访问客户端路由时，发起API请求
      this.itemService.getItem().subscribe({
        next: (data) => this.itemData = data,
        error: (err) => console.error('获取Item数据失败', err)
      });
    }
  }
}

4. 确保OG标签与预加载数据一致性 #

服务端生成OG标签时，必须使用与预注入脚本完全相同的Item数据——比如在同一个Action方法中查询一次数据，同时用于生成OG元标签和注入到客户端脚本，从根源上保证数据一致。

示例ASP.NET Action方法：

public IActionResult ItemDetail(int id)
{
  // 仅查询一次数据
  var item = _itemRepository.GetById(id);
  
  // 设置OG标签数据到ViewBag，用于Razor视图生成meta标签
  ViewBag.OgTitle = item.Title;
  ViewBag.OgDescription = item.Description;
  ViewBag.OgImage = item.ImageUrl;
  
  // 将同一数据传递给预加载脚本
  ViewBag.ItemDetailData = item;
  
  return View();
}

内容的提问来源于stack exchange，提问作者Hakob Grigoryan