我决定使用 ng2-translate 库进行应用程序国际化,因为它似乎比默认实现更好。但是我遇到了以下问题。
这是我的代码:
app.module.ts:
import { TranslateModule } from 'ng2-translate';
@NgModule({
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot(),
appRoutes
],
app.component.ts
@Component({
selector: 'fiv-app',
templateUrl: './app.fivtemplate.html',
providers: [TranslateService]
})
.....
constructor(private _translateService: TranslateService) {
this.langs= ['fi','en'];
_translateService.addLangs(["en", "fi"]);
_translateService.setDefaultLang('fi');
let browserLang = _translateService.getBrowserLang();
_translateService.use('fi');
}
.....
app.component.html
<fiv-hello></fiv-hello>
<h2>{{ 'HOME.TITLE' | translate }}</h2>
和 fivhello.component.ts
<h2>{{ 'HOME.TITLE' | translate }}</h2>
<div [translate]="'HOME.TITLE'"> Test</div>
- 我尝试使用最新版本 5.0.0 但出现此错误:
未捕获的 TypeError:ctorParameters.map 不是 ReflectionCapabilities.parameters 的函数(http://localhost:4200/main.bundle.js:40295:47)
我正在使用 angular-cli 、 angular 2.0.0 和 npm 所以我切换到 4.2.0 似乎在我的配置中工作正常。
app.component.html 中的文本被翻译。但是来自 fivhello 组件的那个没有本地化。它只显示 HOME.TITLE。调试时,我注意到 TranslateService 的 get 函数稍后在渲染后被调用,但我希望文本会更新。
更改使用的语言后,dom 也没有更新。用于更改语言的组件如下:
@Component({ selector: 'language-option', templateUrl: './languageoption.component.html', styleUrls: ['./languageoption.component.css'], providers: [ TranslateService ] }) export class LanguageoptionComponent implements OnInit { langs : String []; constructor(private _translateService: TranslateService) { this.langs = ['fi', 'en']; } ngOnInit() { } public changeLocale = (locale) => { this._translateService.use(locale); } }
有没有人遇到过同样的问题?
谢谢。