Angular应用程序启动时未加载翻译
- 在 app.module.ts 中导入 TranslateModule，并使用 forRoot() 方法加载翻译文件：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import {HttpClient, HttpClientModule} from '@angular/common/http';
export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); }
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], bootstrap: [ AppComponent ] }) export class AppModule { }
- 在组件中导入 TranslateService，并在构造方法中使用该服务的 use 方法：
import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: {{ 'HOME.CONTENT' | translate }}
})
export class AppComponent {{{ 'HOME.TITLE' | translate }}
constructor(private translate: TranslateService) {
this.translate.use('en');
}
}
在这个示例中，我们向 TranslateService 的 use 方法传递了一个语言代码（英语），以便加载该语言对应的翻译文件。在实际项目中，您可能需要根据用户的首选语言设置动态选择语言。