我决定使用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>
未捕获的TypeError:ctorParameters.map不是函数 在ReflectionCapabilities.parameters(http://localhost:4200/main.bundle.js:40295:47)
我正在使用angular-cli,角度为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);
}
}
有没有人遇到同样的问题?
感谢。
答案 0 :(得分:0)
通过更新到angular和angular-cli的最新版本,我为了摆脱5.0.0版本的错误而管理。所以我可以使用它。
针对ohter 2问题的修复与角度工作和单件服务有关。
我已将TranslateService添加到我配置它的根组件的提供程序。但我还添加了子组件和更改语言的外部组件。并且似乎他们创建了此服务的不同实例,当然没有配置。只需将其从其他组件的提供者列表中删除就足以解决这两个问题。
答案 1 :(得分:0)
您应该添加子模块: TranslateModule。的 forChild 强>({....})