Angular SSR中如何根据URL配置HTML的lang属性

嗨，我来帮你搞定这个问题！你已经找对了方向——用inject(DOCUMENT)来操作HTML根元素的lang属性，接下来只需要结合路由信息判断当前语言前缀就行，而且要考虑到SSR场景和路由切换的情况，我一步步给你说：

首先，在你的AppComponent里，除了注入DOCUMENT，还需要注入Router服务来获取路由信息，同时我们要监听路由变化事件，确保用户在不同语言路由间跳转时，lang属性也能同步更新。

下面是完整的代码示例：

import { Component, inject, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 注入所需的服务
  private readonly router = inject(Router);
  private readonly document = inject(DOCUMENT);

  ngOnInit(): void {
    // 页面初始加载时先设置一次lang属性
    this.updateLangFromRoute();
    // 监听路由切换完成事件，每次路由变化都更新lang
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.updateLangFromRoute();
    });
  }

  private updateLangFromRoute(): void {
    // 获取当前完整路由地址
    const currentUrl = this.router.url;
    // 默认语言设为en，你可以根据需求调整
    let currentLang = 'en';

    // 根据路由前缀判断语言
    if (currentUrl.startsWith('/fr')) {
      currentLang = 'fr';
    } else if (currentUrl.startsWith('/en')) {
      currentLang = 'en';
    }

    // 给HTML根元素设置lang属性
    this.document.documentElement.lang = currentLang;
  }
}

我来给你拆解下这段代码的逻辑：

• ngOnInit里先执行一次updateLangFromRoute，确保页面刚加载时就设置正确的lang属性
• 用router.events结合filter监听NavigationEnd事件，这个事件会在路由完全切换完成后触发，避免路由还在跳转中就获取到错误的URL
• 在updateLangFromRoute里，通过router.url拿到当前完整路由，判断前缀是/fr还是/en，然后更新lang属性

另外要注意，这种方式在SSR环境下也能正常工作——Angular的SSR会在服务器端渲染时正确获取当前请求的路由URL，设置好lang属性后再把HTML返回给客户端，完全符合SEO的需求。

如果你的路由结构是用子路由模块来区分语言（比如/fr下的所有页面都属于法语模块），这个逻辑也能完美适配，不管用户直接访问语言路由还是在不同语言间跳转，lang属性都会同步更新。

内容来源于stack exchange