Angular-v6 Universal项目中后端接口更新元数据与标题失败问题

我明白你遇到的问题了——静态数据时页面标题和元数据能正常在服务端渲染的源码里显示，但用HTTP请求拉取后端数据时就失效了。这其实是Angular Universal的一个常见坑：服务端渲染默认不会等待组件里的异步操作完成就生成HTML，导致你的setContent调用时数据还没回来，或者服务端已经把未更新元标签的HTML返回给客户端了。

问题根源 #

当你在ngOnInit里发起HTTP请求时，这是个异步操作，Universal在执行组件初始化时，不会等待这个请求完成就继续生成HTML并返回。而静态数据是同步赋值的，所以setContent能及时更新元标签。

解决方案：让Universal等待异步数据加载完成 #

我们可以用Angular的TransferState来解决这个问题，它不仅能让服务端等待请求完成，还能把服务端获取的数据传递给客户端，避免重复请求。下面是具体步骤：

1. 修改产品服务（ProductService）

先导入必要的模块，添加TransferState逻辑来缓存服务端获取的数据：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

// 定义存储产品数据的State Key
const PRODUCT_DETAIL_KEY = makeStateKey('product-detail');

@Injectable()
export class ProductService {
  constructor(
    private http: HttpClient,
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  get(slug: string) {
    // 检查是否已有服务端缓存的数据
    if (this.transferState.hasKey(PRODUCT_DETAIL_KEY)) {
      const cachedData = this.transferState.get(PRODUCT_DETAIL_KEY, null);
      this.transferState.remove(PRODUCT_DETAIL_KEY); // 移除缓存，避免客户端一直使用旧数据
      return of(cachedData);
    }

    // 替换成你的实际API地址
    const apiUrl = `/api/products/${slug}`;
    return this.http.get(apiUrl).pipe(
      tap(data => {
        // 如果是服务端环境，把数据存入TransferState
        if (isPlatformServer(this.platformId)) {
          this.transferState.set(PRODUCT_DETAIL_KEY, data);
        }
      })
    );
  }
}

2. 修改产品详情组件

使用async/await让组件等待HTTP请求完成，确保调用setContent时数据已经就绪：

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService, SeoContentLoaderService } from '../shared/services';

@Component({
  selector: 'product-detail',
  templateUrl: './product.details.html',
  styleUrls: ['./product.details.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ProductDetailComponent implements OnInit {
  public product: any = {};

  constructor(
    private seoContentLoaderService: SeoContentLoaderService,
    private route: ActivatedRoute,
    public productService: ProductService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  async ngOnInit() {
    const slug = this.route.snapshot.params['slug'];
    // 等待请求返回数据
    const result = await this.productService.get(slug).toPromise();
    this.product = result.product;
    
    // 现在数据已经存在，调用SEO服务更新元标签
    this.seoContentLoaderService.setContent(
      this.product.name,
      this.product.meta_tag_description,
      this.product.meta_tag_keywords,
      slug,
      this.product.image
    );
  }
}

3. 配置TransferState模块

确保在浏览器和服务器模块中导入对应的TransferState模块：

• 浏览器模块（app.browser.module.ts）：

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'boibazar-app' }),
    BrowserTransferStateModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule {}

• 服务器模块（app.server.module.ts）：

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

为什么这样能解决问题？ #

• TransferState会在服务端把获取到的产品数据存储到HTML中的全局变量里，客户端加载时直接读取这个变量，避免重复请求。
• async/await让Universal知道需要等待HTTP请求完成后再生成HTML，这样当调用setContent时，产品数据已经就绪，元标签会被正确更新到服务端渲染的源码中。

你可以试试这个方案，应该就能解决异步数据加载时SEO元标签不更新的问题了！

内容的提问来源于stack exchange，提问作者Shamim Hossain