Ionic3 找不到管道 'translate'

Question

嗨，我已经好几天没有成功地尝试解决这个问题了。当我尝试使用管道翻译时出现此错误

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found ("
<ion-content padding>
<h2>{{[ERROR ->]"HELLO" | translate }}</h2>
</ion-content>
"): ng:///AdminPannelPageModule/AdminPannelPage.html@11:8

我正在使用 angular 5.

这些是我用来翻译的版本

"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

npm 安装

npm install @ngx-translate/core @ngx-translate/http-loader --save

这是我的 Home.html 页面

<h2>{{"HELLO" | translate }}</h2>

JSON 待翻译文件：

assets/i18n/en.json

{
"HELLO": "hello"
}

assets/i18n/it.json

{
"HELLO": "ciao"
}

在导出中我使用了 export function setTranslateLoader (http: HttpClient) 而不是 export function setTranslateLoader (http: Http) 因为如果不使用它会给我这个错误：Argument of type 'Http' is not assignable to parameter of type 'HttpClient '. Property 'handler' is missing in type 'Http'.

app.module.ts

中有我的导入

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function setTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}


@NgModule({
imports: [
HttpClientModule,
IonicModule.forRoot(MyApp),
TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (setTranslateLoader),
    deps: [HttpClient]
  }
}),
],

这是我的 app.component.ts 构造函数

constructor(..., translate: TranslateService) {
     translate.setDefaultLang('en');
     ...
}

Answer 1

我们可以看到您有一个子模块 AdminPannelPageModule，其中实际抛出了错误。您还需要在该模块中标记 TranslateModule，但跳过 forRoot()。所以在你的 AdminPannelModule:

imports: [
  ....
  TranslateModule
],

Ionic3 找不到管道 'translate'

Ionic3 The pipe 'translate' could not be found

ionic-framework

ngx-translate

ionic3

angular