Question

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

我收到此错误：错误错误：未捕获（承诺）：错误：模板解析错误：找不到管道“ translate”（“

[错误->] {{'文本'|翻译}} 默认”）：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 { }

我的translate-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 {“标题”：“ Esta enESpañoool”，“文本”：“ Texto aleatorio”}

json文件位于资产/ i18n中，但是我没有该文件夹，所以我手动创建了它。这可能是问题吗？

Answer 1

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

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

对于您的项目，您需要打开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 {}

找不到“翻译”管道Ionic 4

3 个答案: