Ionic4 Angular7 ngx-translate труба не найдена - PullRequest
Новая
       27

Ionic4 Angular7 ngx-translate труба не найдена

0 голосов
/ 30 января 2019

Я нуб с этим модулем.

Я запускаю новый пустой ионный проект и следую некоторому учебнику.

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"
      }

дома.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 }}

Спасибо всем ^^

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Единственная ошибка: 

**private** translate: TranslateService

удалить приват и все работает!

translate: TranslateService:)

0 голосов
/ 30 января 2019

Поскольку Ionic 4 загружается по умолчанию с отложенной загрузкой, вы должны реализовать TranslateModule на каждом модуле страницы, где вы будете использовать TranslateService. 

    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 { }
...