Как я могу перевести ввод текста в AngularFire2 Firestore, используя ngx-translate? - PullRequest
Новая
       23

Как я могу перевести ввод текста в AngularFire2 Firestore, используя ngx-translate?

0 голосов
/ 01 октября 2018 
<div class="row"><h6>{{item.ageList}}</h6></div>
<div class="row"><h6>{{item.amenities}}</h6></div>

Примечание. Я хочу перевести данные после получения Firestore, такие как 

<div class="row"><h6>{{'item.ageList' | translate}}</h6></div>
<div class="row"><h6>{{'item.amenities' | translate}}</h6></div>

Изображение объекта Firestore

1 Ответ

0 голосов
/ 01 октября 2018

В репозитории ngx-translate у вас есть пример Firebase.
https://github.com/ngx-translate/core/blob/master/FIREBASE_EXAMPLE.md

РЕДАКТИРОВАТЬ. После работы я могу привести вам рабочий пример.
1.Поместите конфигурацию вашего firebase в envrionment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: ''
  },
};

Вы можете получить ее из консоли Firebase вашего проекта.
2.Создайте firestore-trans-loader.ts в shared каталоге, рядом с app каталогом 

import { TranslateLoader } from '@ngx-translate/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export class FirestoreTransLoader implements TranslateLoader {

  constructor(private db: AngularFirestore) {
  }

  getTranslation(lang: string, prefix: string = 'translates'): Observable<any> {
    return this.db.doc(`${prefix}/${lang}`).valueChanges();
  }

}

3.Подготовьте ваш app.module.ts.

export function FirestoreTranslationsLoaderFactory(db: AngularFirestore) {
  return new FirestoreTransLoader(db);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    TranslateModule.forRoot({
      loader: {provide: TranslateLoader, useFactory: FirestoreTranslationsLoaderFactory, deps: [AngularFirestore]}
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.И, наконец, используйте его в своем компоненте 

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

@Component({
  selector: 'app-root',
  template: `
    <p>{{ helloKey | translate }}</p>
    <select (change)="onLangChange($event)">
      <option value="en">English</option>
      <option value="pl">Polish</option>
    </select>

  `,
})
export class AppComponent {

  helloKey = 'HELLO';
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

  onLangChange(event) {
    this.translate.use(event.target.value);
  }

}

Здесь у вас есть полное репо без конфигурации, где вы можете узнать подробности (если я о чем-то забыл).
https://github.com/Mr-Eluzive/angularfire-ngx-translate-exampleТакже я вложил некоторую работу в это, поэтому, возможно, я попытаюсь протолкнуть это в ngx-translate репо.

...