如何在Angular SSR（nguniversal）中处理动态Meta标签？

核心依赖与基础配置 #

确保项目已正确集成 Angular Universal，app.module.ts 和 app.server.module.ts 中分别导入 BrowserModule、ServerModule，并完成 SSR 基础配置。

方法一：组件内直接动态设置 #

利用 Angular 官方提供的 Title 和 Meta 服务，结合路由参数或接口数据动态生成标签内容：

import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
  constructor(
    private titleService: Title,
    private metaService: Meta,
    private route: ActivatedRoute,
    private productService: ProductService
  ) {}

  ngOnInit(): void {
    const productId = this.route.snapshot.paramMap.get('id');
    // 从接口获取动态数据
    this.productService.getProduct(productId).subscribe(product => {
      // 设置页面标题
      this.titleService.setTitle(`${product.name} - 商城平台`);
      
      // 更新 Meta 标签
      this.metaService.updateTag({ name: 'description', content: product.description });
      this.metaService.updateTag({ property: 'og:title', content: product.name });
      this.metaService.updateTag({ property: 'og:description', content: product.description });
    });
  }
}

方法二：路由守卫提前预加载数据（更适合 SSR） #

使用路由 Resolve 守卫提前获取数据，确保 SSR 渲染时已拿到动态内容，避免标签为空：

1. 创建 Resolve 服务

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ProductService } from './product.service';

@Injectable({ providedIn: 'root' })
export class ProductResolver implements Resolve<any> {
  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    const productId = route.paramMap.get('id');
    return this.productService.getProduct(productId);
  }
}

2. 配置路由

const routes: Routes = [
  {
    path: 'product/:id',
    component: ProductComponent,
    resolve: { product: ProductResolver }
  }
];

3. 组件内使用预加载数据

ngOnInit(): void {
  const product = this.route.snapshot.data['product'];
  this.titleService.setTitle(`${product.name} - 商城平台`);
  this.metaService.updateTag({ name: 'description', content: product.description });
}

SSR 注意事项 #

• 避免在服务器端使用 window、document 等浏览器专属 API，必要时用 PLATFORM_ID 判断运行环境：

  import { PLATFORM_ID, Inject } from '@angular/core';
  import { isPlatformBrowser, isPlatformServer } from '@angular/common';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngOnInit(): void {
    if (isPlatformServer(this.platformId)) {
      // 服务器端专属逻辑
    }
  }
  

• 验证效果：启动 SSR 服务后，右键查看页面源代码，确认动态生成的 Title、Meta 标签已存在。

内容的提问来源于stack exchange，提问作者Sai Praneeth