Weiba's Blog
0%

Angular中使用ngx-translate国际化

发表于 更新于 分类于

12.Angular中使用ngx-translate国际化

1. 下载依赖

1
2
3
4
5
npm install @ngx-translate/core --save

-- 如果需要指定翻译文件,则还需下载
npm install @ngx-translate/http-loader --save

2. 导入TranslateModule模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory:  (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json'), //指定加载的配置文件
        deps: [HttpClient]
      },
      defaultLanguage: 'tw' //指定默认语系
    })
  ],
  providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} }
  ],
  bootstrap: [AppComponent]
})

3. 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
在html中使用,可以通过指定或者管道
<span (click)="editChannel()">{{'edit'|translate}}</span>

//translate:params,params是参数,key与的翻译文件中的一致
<span [innerHTML]="'liveChannel.pageTips'|translate:{'0':totalCount}"></span>


在ts中使用,需要引入TranslateService
import { TranslateService } from '@ngx-translate/core';

constructor(public translate: TranslateService) {}

//翻译多语言
this.translate.instant('liveChannel.selectOneTip')

官网地址

4. ts中使用translate.instant未初始化

在AppModule中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
providers: [{
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [TranslateService, Injector],
    multi: true
  }]

export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    // console.log('appInitializerFactory--');
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = environment.locale;
      translate.setDefaultLang(environment.locale);
      translate.use(langToSet).subscribe(() => {
        // console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        // console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json'),
        deps: [HttpClient]
      },
      defaultLanguage: environment.locale
    }),
  ],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [TranslateService, Injector],
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }


export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    // console.log('appInitializerFactory--');
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = environment.locale;
      translate.setDefaultLang(environment.locale);
      translate.use(langToSet).subscribe(() => {
        // console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        // console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}