Angular 将翻译合并到应用中

在Angular中，当你有了翻译文件并希望将翻译合并到应用中时，你需要确保正确配置翻译服务和模块。以下是一般的步骤：

1. 安装翻译库：

确保你已经安装了用于 Angular 的翻译库，比如 @ngx-translate/core。

   npm install @ngx-translate/core --save

2. 创建翻译文件：

在你的应用中，创建一个文件夹（通常是 assets/i18n），并在其中添加翻译文件，例如 en.json 和 fr.json。

   // en.json
   {
     "greeting": "Hello!"
   }

   // fr.json
   {
     "greeting": "Bonjour !"
   }

3. 配置翻译服务和模块：

在你的应用模块中，配置翻译服务和模块。你需要创建一个自定义的 TranslateLoader 来加载翻译文件。

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClientModule, HttpClient } from '@angular/common/http';
   import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
   import { TranslateHttpLoader } from '@ngx-translate/http-loader';

   // AOT compilation requires an exported function for factories
   export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
   }

   @NgModule({
     imports: [
       BrowserModule,
       HttpClientModule,
       TranslateModule.forRoot({
         loader: {
           provide: TranslateLoader,
           useFactory: HttpLoaderFactory,
           deps: [HttpClient],
         },
       }),
     ],
     declarations: [],
     bootstrap: [],
   })
   export class AppModule {}

4. 在组件中使用翻译服务：

在你的组件中，使用 TranslateService 来获取翻译内容。

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

   @Component({
     selector: 'app-root',
     template: `
       <h1>{{ greeting }}</h1>
       <button (click)="switchLanguage()">Switch Language</button>
     `,
   })
   export class AppComponent {
     greeting: string;

     constructor(private translate: TranslateService) {
       translate.setDefaultLang('en');
       this.switchLanguage();
     }

     switchLanguage() {
       const lang = this.translate.currentLang === 'en' ? 'fr' : 'en';
       this.translate.use(lang).subscribe(() => {
         this.greeting = this.translate.instant('greeting');
       });
     }
   }

在上面的例子中，点击按钮会切换语言并更新显示的问候语。

5. 运行应用：

启动你的应用并确保翻译功能正常工作。

   ng serve

这些步骤应该能够帮助你将翻译文件成功地集成到你的Angular应用中。确保文件路径和配置正确，以确保 Angular 能够正确加载和使用翻译。

转载请注明出处：http://www.pingtaimeng.com/article/detail/4971/Angular