npm install @angular/localize @ngx-translate/core
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
{{ 'HELLO' | translate }} {{ name }}!
{{ 'DESCRIPTION' | translate }}
`
})
export class AppComponent {
name = 'Angular';
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('fr');
}
}
{
"HELLO": "Hello",
"DESCRIPTION": "This is a description."
}
{{ 'GREETING' | translate:{ name: 'Alice' } }}
如果您的翻译仍然无法正常工作,请确保使用了正确的语言代码,例如“en”不是“eng”。
上一篇:Angular12Storybook中的this上下文将字段转换为字符串
下一篇:Angular12TS1086(TS)Anaccessorcannotbedeclaredinanambientcontext