动态设置HTML lang属性仍导致Chrome弹出错误翻译弹窗的解决办法

方案1：初始设置无内容语言代码zxx避免误识别 #

Chrome对ISO 639-3标准中的zxx（表示无内容/无语言的文本）不会触发翻译猜测。你可以在index.html中先给<html>标签设置这个临时值，等API请求完成后再替换为真实语言代码：

<!-- index.html 初始状态 -->
<html lang="zxx">

在Angular的语言加载逻辑中，获取到真实语言后更新属性：

// 语言请求完成后的处理代码
this.http.get('/api/languages').subscribe(languages => {
  const defaultLang = languages[0]; // 取返回的首个语言作为默认值
  document.documentElement.lang = defaultLang;
});

方案2：用APP_INITIALIZER在应用启动前加载语言 #

通过Angular的APP_INITIALIZER令牌，在应用初始化完成前同步完成语言请求，这样就能在页面渲染前设置好正确的lang属性，彻底避免中间状态：

1. 创建语言加载服务：

@Injectable({ providedIn: 'root' })
export class LanguageLoaderService {
  private defaultLang: string;

  constructor(private http: HttpClient) {}

  loadLanguage(): Promise<void> {
    return this.http.get<string[]>('/api/languages')
      .toPromise()
      .then(languages => {
        this.defaultLang = languages[0];
        document.documentElement.lang = this.defaultLang;
      });
  }

  getDefaultLang(): string {
    return this.defaultLang;
  }
}

2. 在AppModule中配置APP_INITIALIZER：

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (langLoader: LanguageLoaderService) => () => langLoader.loadLanguage(),
      deps: [LanguageLoaderService],
      multi: true
    }
  ]
})
export class AppModule {}

方案3：增强meta标签配置阻止翻译 #

如果前两种方案不适用，可以组合使用更完整的meta配置，初始阻止翻译，待语言设置完成后移除或更新：

<!-- index.html 初始添加 -->
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="zxx">

在语言加载完成后，动态调整meta标签：

this.http.get('/api/languages').subscribe(languages => {
  const defaultLang = languages[0];
  document.documentElement.lang = defaultLang;
  
  // 移除阻止翻译的meta标签
  const googleMeta = document.querySelector('meta[name="google"]');
  if (googleMeta) googleMeta.remove();
  
  // 更新Content-Language属性
  const contentLangMeta = document.querySelector('meta[http-equiv="Content-Language"]');
  if (contentLangMeta) contentLangMeta.setAttribute('content', defaultLang);
});

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