我在我的Ionic 4应用程序中工作,我已经安装了ngx-translate
插件。它在app.component.html
工作正常,但在tabs.page.html
它显示错误。
无法找到管道“翻译”
这是我的app.component.html:
<ion-list class="mylist22" color="myheader">
<ion-item color="myheader">
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()'>
<ion-select-option value="en" selected>English</ion-select-option>
<ion-select-option value="ar">Arabic</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
在此视图中,我有语言选择框。
这是我的app.component.ts:
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
languageSelected: any = 'en';
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private translate: TranslateService
) {
this.translate.addLangs(['en', 'ar']);
this.translate.setDefaultLang('en');
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.setLanguage();
});
}
setLanguage() {
const defaultLanguage = this.translate.getDefaultLang();
if (this.languageSelected) {
console.log(this.languageSelected);
this.translate.setDefaultLang(this.languageSelected);
this.translate.use(this.languageSelected);
} else {
this.languageSelected = defaultLanguage;
this.translate.use(defaultLanguage);
}
}
}
这是我的app.module.ts:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}
@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}) ],
})
在app.component.html
,它工作正常,但在tabs.pahe.html
它没有工作。
这是在tabs.page.html中:
<ion-label>{{ 'ACCOUNT_TAB_LAB' | translate }}</ion-label>
错误:找不到管道'translate'。
任何帮助深表感谢。
您需要在要使用TranslateModule
管道的每个模块中导入translate
。
import { TranslateModule } from '@ngx-translate/core';
...
imports: [
TranslateModule // do not call forRoot from any module other than AppModule
]
...