Angular 13切换组件后查看源码meta仅显示index.html内容的解决方法

核心原因说明 #

• 浏览器右键「查看网页源代码」展示的是Web服务器直接返回的原始静态index.html内容。Angular作为单页应用，所有组件切换、DOM修改都是客户端加载JS后在运行时完成的，不会修改服务器存储的静态源文件，因此永远不可能在「查看源代码」页面看到运行时更新的meta标签。要校验meta是否实际生效，需要打开浏览器开发者工具（F12），在「Elements」面板下查看<head>节点的实时DOM内容，这里展示的才是当前页面真正生效的标签。
• 你当前的代码存在两处明显疏漏，会导致meta更新逻辑失效，且页面标题完全没有同步更新。

可落地修复步骤 #

1. 正确注入内置服务，补全更新逻辑 #

Angular提供了内置的Meta和Title服务专门用于处理元信息，你需要先确认服务正确导入、注入，同时补全title更新逻辑，给updateTag方法传入选择器参数避免重复生成meta标签。
子组件完整示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
// 导入Angular内置的元信息服务
import { Meta, Title } from '@angular/platform-browser';

export class NoticeComponent implements OnInit, OnDestroy {
  // 构造函数注入服务
  constructor(
    private meta: Meta,
    private title: Title
  ) {}

  ngOnInit(): void {
    // 更新页面标题
    this.title.setTitle('Title-1 here');
    // 更新meta标签，第二个参数为选择器，用于精准匹配要替换的标签，避免生成重复meta
    this.meta.updateTag(
      { name: 'keywords', content: 'Title-1 here' },
      `name='keywords'`
    );
    this.meta.updateTag(
      { name: 'description', content: 'Description-1 is here' },
      `name='description'`
    );
  }

  // 组件销毁时清理自定义meta，避免多组件切换时标签残留
  ngOnDestroy(): void {
    this.meta.removeTag(`name='keywords'`);
  }
}

2. 搜索引擎适配（按需配置） #

如果你的站点需要被搜索引擎收录，普通客户端渲染模式下，不执行JS的爬虫只能抓到index.html里的静态meta，无法识别各组件单独配置的元信息。这种场景需要集成Angular Universal实现服务端渲染，服务端会在收到路由请求时提前把对应组件的meta注入到HTML中再返回给客户端，此时无论是爬虫还是浏览器右键「查看源代码」，都能看到对应路由的正确meta信息。

内容的提问来源于stack exchange，提问作者Ds D