angular - 找不到管道“翻译”错误在 Ionic 4 中显示
问题描述
我正在使用我的 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>
错误:找不到管道“翻译”。
任何帮助深表感谢。
解决方案
您需要TranslateModule
在要使用translate
管道的每个模块中导入。
import { TranslateModule } from '@ngx-translate/core';
...
imports: [
TranslateModule // do not call forRoot from any module other than AppModule
]
...
推荐阅读
- angular - 如果订阅者未在角度 2/4/6 中完成,如何等待返回语句
- amazon-web-services - 是否可以在不创建额外集群的情况下恢复 AWS ElastiCache (redis) 的数据?
- html - 导航栏和暴民菜单内带有品牌文本的徽标
- ios - 显示 json 序列化错误的用户友好消息
- javascript - 从 Javascript 转换为 Angular 6 的有效 TYPESCRIPT - G Picker API
- azure - 通过 Powershell 脚本检查具有不同资源的已停止 VM
- python - Python os.system cp 命令复制空文件
- java - 无法从 java.text.ParseException 行解析日期:无法解析的日期
- php - 为什么结果等于 0 有时等于 1 - shell_exec('pgrep -f
- jasmine - 如何获取规范名称以用作量角器-html-reporter-2 中的输出文件名?