要在Angular 2组件中插入带有翻译管道的HTML元素,您可以按照以下步骤进行操作:
npm install @ngx-translate/core --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
{{ 'HELLO' | translate }}
`
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en'); // 使用英文作为默认语言
}
}
在上面的代码中,我们在组件模板中使用了翻译管道来显示翻译文本。我们使用translate
管道将'HELLO'
翻译为适当的语言。
{
"HELLO": "Hello, World!"
}
在上面的示例中,我们将HELLO
键映射到英文的Hello, World!
字符串。
getTranslation
方法来加载翻译文本。例如,在app.component.ts文件中,您可以添加以下代码:constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
translate.getTranslation('en').subscribe((res: any) => {
translate.setTranslation('en', res);
});
}
在上面的代码中,我们使用translate.getTranslation
方法从en.json文件中加载翻译文本,并使用translate.setTranslation
方法将其设置为英文语言。
现在,当您运行您的应用程序时,您应该能够在组件中插入带有翻译管道的HTML元素,并正确显示翻译文本。
上一篇:Angular 2 - Promise chaining - promise not getting called(Angular 2 - Promise链式调用 - promise未被调用)