找不到管道“翻译” Ionic 4

Question

我正在制作一个可以使用 Ionic4 更改语言的移动应用程序。我基本上遵循了这个教程：https://www.freakyjolly.com/ionic-4-adding-multi-language-translation-feature-in-ionic-application-using-ngx-translate/.

我收到了这个错误： ERROR 错误：未捕获（承诺中）：错误：模板解析错误： 找不到管道“翻译”（“

[错误->] {{ '文本' |翻译 }} 默认”): ng:///ConfigurePageModule/ConfigurePage.html@16:2

我一直在阅读其他人有类似问题但仍然无法解决的其他帖子。

我的 app.module.ts

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

    export function LanguageLoader(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
    }
    @NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
    BrowserModule, AngularFireModule.initializeApp(environment.firebase), IonicRatingModule, IonicSelectableModule, IonicStorageModule.forRoot(), 
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (LanguageLoader),
            deps: [HttpClient]
        }
    })
        ],
        providers: [
    StatusBar, Firebase, PhotoViewer, HTTP, Toast,
    AngularFireDatabase,
    CallNumber,
    EmailComposer,
    AngularFireAuth, AngularFirestore,
    SplashScreen, InAppBrowser, TranslateConfigService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    SocialSharing,
    File
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule { }

我的翻译-config.service.ts

    import { Injectable } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core';

    @Injectable({
providedIn: 'root'
    })
export class TranslateConfigService {

constructor(
    private translate: TranslateService
) { }

getDefaultLanguage() {
    let language = this.translate.getBrowserLang();
    this.translate.setDefaultLang(language);
    return language;
}

setLanguage(setLang) {
    this.translate.use(setLang);
}

}

我的 configure.page.ts

    import { Component, OnInit, NgModule } from '@angular/core';
    import { ThemeService } from '../theme.service';
    import { TranslateConfigService } from '../translate-config.service';
    import { TranslateModule } from '@ngx-translate/core';

    @Component({
      selector: 'app-configure',
      templateUrl: './configure.page.html',
      styleUrls: ['./configure.page.scss'],
            })
    @NgModule({

    imports: [TranslateModule]
    })
    export class ConfigurePage implements OnInit {
selectedLanguage: string;
constructor(private theme: ThemeService, private translateConfigService: TranslateConfigService) {
    this.selectedLanguage = this.translateConfigService.getDefaultLanguage();
}


      ngOnInit() {
      }
        languageChanged() {
    this.translateConfigService.setLanguage(this.selectedLanguage);
    console.log(this.selectedLanguage);
        }
    }

我的configure.page.html

    <ion-content>
{{ 'text' | translate }}
<div style="padding:10px;">
    <h5 style="">Configure sus preferencias</h5>
    <ion-list>
        <ion-item>
            <ion-label>Select Language</ion-label>
            <ion-select placeholder="Select One" [(ngModel)]="selectedLanguage" (ionChange)="languageChanged()">
                <ion-select-option value="es">Español</ion-select-option>
                <ion-select-option value="en">English</ion-select-option>
            </ion-select>
        </ion-item>
    </ion-list>
</div>
    </ion-content>

我的 en.json {"title": "Ionic 4 多语言翻译","text": "这是在应用程序中显示翻译的随机文本"
} 我的 es.json {"title": "Esta en ESpañoool", "text": "Texto aleatorio"}

json 文件在 assets/i18n 中，但我没有那个文件夹，所以我手动创建了。会不会是这个问题？

Answer 1

我没有看到你也将它放入页面级模块文件中。

如果您查看 Ionic Academy 上的 Simon's tutorial for this，您会看到“使用 ngx translate 服务、管道和指令”下有一个额外的部分。

对于您的项目，您需要打开configure.module.ts 并添加TranslateModule，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { ConfigurePage } from './home.page';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({</ul>


  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ConfigurePage
      }
    ]),
    TranslateModule
  ],
  declarations: [ConfigurePage]
})
export class ConfigurePageModule {}

我在 JollyFreaky 的教程底部也看到了 first comment 的可能变体，所以如果这不起作用，请尝试像这样导入它：

  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ConfigurePage
      }
    ]),
    TranslateModule.forChild()
  // etc

Answer 2

我也有类似的情况，我建议在你的 ts 页面的模块代码中添加以下最小值。

import { TranslateModule } from '@ngx-translate/core';

那么，

imports: [ 
    TranslateModule
  ],

Answer 3

如果来源具有每个页面特定的模具，则解决方案可能有效。您必须将管道模块添加到每个页面特定的模块才能使其工作。

 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { RegisterOnePage } from "./register-one";
 import { PipesModule } from '../../../pipes/pipes.module';

 @NgModule({
  declarations: [RegisterPage],
  imports: [
    IonicPageModule.forChild(RegisterPage),
    PipesModule
  ]
})
export class RegisterPageModule {}

Answer 4

请参考https://ionicframework.com/docs/v3/developer-resources/ng2-translate/#lazy-loading-pages

延迟加载页面

如果您想将 Ionics 延迟加载页面与 ngx-translate 一起使用，您必须配置您的 component.module.ts 文件。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';//<- add this
import { HelloPage } from './hello-page';

@NgModule({
  declarations: [
    HelloPage,
  ],
  imports: [
    IonicPageModule.forChild(HelloPage),
    TranslateModule.forChild()//<- and this
  ],
  exports: [
    HelloPage
  ]
})
export class HelloPageModule {}