找不到 Ionic4 Angular7 ngx-translate 管道

Question

我对这个模块一窍不通。

我开始空白的新离子项目，并遵循一些教程。

app.module.ts

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    AppRoutingModule,
       // configure the imports
       HttpClientModule,
       TranslateModule.forRoot({
           loader: {
               provide: TranslateLoader,
               useFactory: HttpLoaderFactory,
               deps: [HttpClient]
           }
          },)
    ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent ]
})
export class AppModule {}
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private translate: TranslateService
  ) {
    translate.setDefaultLang('en');
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

}

en.json

    {
        "welcometitle": "Welcome :)",
        "welcomejbaya": "Just be as you are !",
        "login": "Login",
        "password": "Password",
        "connect": "connect"
      }

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  {{'welcometitle' | translate }}
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>

我收到错误管道翻译未找到。

你能慢慢给我解释一下吗（我是初学者^^）为什么它不起作用？ ^^

它正在正确搜索 en.json 但没有翻译，我试过了

<p translate>id</p>
<p [translate]="'id'"></p>
 {{ 'id' | translate }}

谢谢大家^^

Answer 1

由于默认情况下 Ionic 4 是延迟加载的，因此您必须在将使用 TranslateService.

的每个页面模块上实现 TranslateModule

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

    @NgModule({
       imports: [
         CommonModule,
         FormsModule,
         IonicModule,
         TranslateModule.forChild(),
         RouterModule.forChild([
          {
           path: '',
           component: HomePage
          }
    ])
  ],
  declarations: [HomePage]
 })
 export class HomePageModule { }

Answer 2

唯一的错误是：

**private** translate: TranslateService

删除 private 就可以了！

翻译：TranslateService :)

找不到 Ionic4 Angular7 ngx-translate 管道

Ionic4 Angular7 ngx-translate pipe not found

typescript

ngx-translate

angular

ionic4

angular7