是否可以使用 Angular 拦截器拦截像 .html 这样的静态文件？我想改变 lang 属性答案

【问题标题】：Is it possible to intercept static file like .html with Angular interceptor? I wish to change lang attribute是否可以使用 Angular 拦截器拦截像 .html 这样的静态文件？我想改变 lang 属性
【发布时间】：2021-04-28 22:53:08
【问题描述】：

我找到了这个关于 http 拦截的 Angular 文档。 https://angular.io/guide/http#intercepting-requests-and-responses 我想在 Angular 拦截器中拦截 html，以便在将 html 文件呈现给浏览器之前对其进行更改。我尝试使用服务器，但它非常复杂，因为我必须更改整个项目结构。
基本上，
我希望根据用户选择的语言更改<html lang=" ">。我已经实现了this.document.documentElement.lang = lang;，这正在改变 lang 属性，但是当我转到 view-source 时，lang 属性不会改变。
我尝试从以下链接关注解决方案，但我不理解此解决方案，也找不到该解决方案中提到的方法createServerRenderer()。 Angular set html lang atttribute in SSR build

任何帮助或指导将不胜感激，谢谢

【问题讨论】：

你能显示你的 server.ts 吗？

标签： angular express seo angular-universal lang

【解决方案1】：

对于使用 ngrx-translate 并在 angular bootstrap 之前进行工作，请尝试像这样使用 APP_INITIALIZER：

export function initApp(translate: TranslateService) {
   const browserLang = translate.getBrowserLang();
   translate.use(browserLang);
}

@NgModule({
declarations: [ ],
imports: [ ],
providers: [
{ 
  provide : APP_INITIALIZER, 
  multi : true,  
  deps : [TranslateService],
  useFactory : initApp
 }
],
bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

嘿@bjlasc01，感谢您的回复，我们在我们的项目中使用@ngx-translate/core 和@ngx-translate/http-loader。翻译文件看起来像这样。 src/app/assets/i18n/[locale].json 我不确定它是否与使用来自 angular.io/guide/i18n 的框架国际化相同，构建过程不会在 dist/browser 和dist/server 文件夹，就像我在一些示例中看到的那样。如果<html lang=" "> 可以在当前设置的视图源中更改，任何想法。或者我必须改变我目前的实现。谢谢。

【解决方案2】：

尝试像这样设置lang 值，这将适用于客户端和服务器端

constructor(private renderer: Renderer2,@Inject(DOCUMENT) private _document: any)
{
}

ngOnInit()
{
  const langValue = "en";//Assign correct value here
  this.renderer.setAttribute(this._document.body.parentNode, 'lang', langValue);

【讨论】：

嗨大卫，我能够看到 langValue 在视图源中设置为文档 lang 属性。但是，如果我想分配 langValue 动态值，如何使它工作？假设我从 navigator.language 获取语言环境并将其分配给 langValue。
您无法访问导航器的语言服务器端。您需要为每种语言设置单独的 url，以便直接访问正确的语言，和/或使用 cookie 来存储首选语言