网络国际化答案

【问题标题】：Web internationalization网络国际化
【发布时间】：2021-12-01 19:09:44
【问题描述】：

我是使用 Angular 的初学者，我对这个框架提供的众多可能性感到非常满意。但是有些库像 ngx-Translate 一样很难使用。

情况：

我从一个创意模板开始，它在 app-component 和其他组件之间使用中间层 (admin-layout.component.html)： [文件说明][1]

<div class="wrapper">
  <div class="sidebar">
    <app-sidebar></app-sidebar>
  </div>
  <div class="main-panel">
    <app-navbar></app-navbar>
    <app-select-language></app-select-language>
    <router-outlet></router-outlet>
    <app-footer></app-footer>

  </div>
</div>

我的目标是设置我的 web 应用程序的内部化。最初加载应用程序时，我已经成功使用了浏览器语言（英语或法语）

现在，我正在尝试使我的选择语言组件具有功能性，该组件旨在通过用户选择来切换整个应用程序语言：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-select-language',
  template: `
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option
        *ngFor="let lang of translate.getLangs()"
        [value]="lang"
        [attr.selected]="lang === translate.currentLang ? '' : null"
      >{{lang}}</option>
    </select>
  `,
})
export class SelectLanguageComponent {
  constructor(public translate: TranslateService) {}
}

当做出选择时，app-module 已到达并传输了 lang 参数，但我找不到用其他语言重新编写页面的方法...

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule, APP_INITIALIZER, Injector } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';
import { TranslateModule, TranslateLoader, TranslateService, DEFAULT_LANGUAGE } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
// import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';


import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";

NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TranslateModule.forRoot()
  ]
})


export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);

  //return new TranslateHttpLoader(httpClient,
  //environment.feServerUrl + '/assets/i18n/', '.json');
}

export function translateFactory(translate: TranslateService) {
  return async () => {
    translate.getBrowserLang();
    // selection de la langue du navigateur :
    const langue = translate.getBrowserLang();
    translate.setDefaultLang(langue);
    translate.use(langue);
    translate.addLangs(['fr', 'en']);

    const supportedLangs = ["en", "fr"];
    supportedLangs.forEach((language) => {
      translate.reloadLang(language);
    });

    return new Promise<any>(resolve => {
      translate.onLangChange.subscribe((lang) => {
        this.useDefaultLang == false;
        // Called by the select-language.component
        this.currentLang = lang.lang;
        console.log("this.currentLang", this.currentLang);
        // translate.setTranslation(lang.lang, DEFAULT_LANGUAGE);
        // translate.setDefaultLang(this.currentLang);
        // translate.reloadLang(this.currentLang);
        translate.use(this.currentLang);
        resolve(this.currentLang);
      });
    });
  };
}




@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    NgbModule,
    RouterModule,
    AppRoutingModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: translateFactory,
      deps: [TranslateService, Injector],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

所有注释的代码都是不起作用的函数！

提前感谢您提供的帮助。

【问题讨论】：

标签： angular typescript internationalization multilingual ngx-translate

【解决方案1】：

你只有两种方式：

i18n（不适用于实时重新加载数据）- 您必须具有子域或路由，例如：
```
domain.com/en/...
domain.com/fr/...
```
或类似的子域
ngx-translate - 当你按下某个按钮时 - 所有数据都被重绘而不重新加载页面

【讨论】：

【解决方案2】：

当使用 ngx-translate 并更改语言时，它会自动重新加载当前语言的所有文本，但当然这需要您自己定义：

例如app.component.html：

<div>
    <h1>{{ 'demo.title' | translate }}</h1>
</div>

这是您必须使用 ngx-translate 进行国际化的 3 个选择之一。

所以考虑到这一点：

在您的资产文件夹中创建 il8n 文件夹

这是您存储翻译的地方 2）创建en.json、fr.json等......

示例：

en.json:

{
  "demo.title": "Translation demo",
  "demo.text": "This is a simple demonstration app for ngx-translate"
}

fr.json:

{
  "demo.title": "Démo de traduction",
  "demo.text": "Ceci est une application de démonstration simple pour ngx-translate"
}

注意：为此，我建议您使用像 BabelEdit 这样的工具，这样您可以更快、更轻松地翻译文件......但这是个人选择......

基于并且您发布的代码应该可以工作.....

也请阅读此内容

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate

希望对您有所帮助..如果您需要更详细的解释，请告诉我..我可以为您准备一个小演示..

干杯！

【讨论】：