时间戳

首页 > 解决方案 > 找不到管道“翻译” Ionic 4

pipe - 找不到管道“翻译” Ionic 4

问题描述

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

我的翻译-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>

my en.json {"title": "Ionic 4 Multi Language Translation","text": "这是在应用程序中显示翻译的随机文本"
} my es.json {"title": "Esta en ESpañoool", "text ": "文本 aleatorio"}

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

标签： pipeionic4translate

解决方案

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

如果您在 Ionic Academy 上查看Simon 的教程，您会看到“使用 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 教程底部的第一条评论中也看到了这种可能的变体，所以如果这不起作用，请尝试像这样导入它：

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

推荐阅读