我正在使用Ionic 4 App,并且已经安装了ngx-translate
插件。在app.component.html
中工作正常,但在tabs.page.html
中显示错误。
找不到管道“ translate”
这是我的 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>
错误:找不到管道“翻译”。
非常感谢您的帮助。
答案 0 :(得分:1)
您需要在要使用TranslateModule
管道的每个模块中导入translate
。
import { TranslateModule } from '@ngx-translate/core';
...
imports: [
TranslateModule // do not call forRoot from any module other than AppModule
]
...
答案 1 :(得分:1)
尝试将TranslateModule添加到shared.module文件:
import { TranslateModule } from "@ngx-translate/core";
@NgModule({
imports: [TranslateModule, ],
exports: [TranslateModule],
providers: [],
})
export class SharedModule {}
答案 2 :(得分:0)
就我而言,错误消息有点令人困惑。 在我的代码合并期间,该组件从 app.module.ts 声明 中删除。将组件添加到app.module.ts 声明后,问题得到解决。