[英]How can I translate text input in AngularFire2 Firestore use ngx-translate?
<div class="row"><h6>{{item.ageList}}</h6></div>
<div class="row"><h6>{{item.amenities}}</h6></div>
Note: I wanna translate data after getting of Firestore such as 注意:我想在获取Firestore之后转换数据,例如
<div class="row"><h6>{{'item.ageList' | translate}}</h6></div>
<div class="row"><h6>{{'item.amenities' | translate}}</h6></div>
In ngx-translate
's repo you do have Firebase's example. 在ngx-translate
的repo中,您确实有Firebase的示例。
https://github.com/ngx-translate/core/blob/master/FIREBASE_EXAMPLE.md https://github.com/ngx-translate/core/blob/master/FIREBASE_EXAMPLE.md
EDIT. 编辑。 After put some work I can give you working example. 完成一些工作后,我可以为您提供工作示例。
1. Put your firebase's config into envrionment.ts
1.将您的Firebase的配置放入envrionment.ts
export const environment = {
production: false,
firebase: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
},
};
You can get it from Firebase Console of your project. 您可以从项目的Firebase控制台获取它。
2. Create firestore-trans-loader.ts
in shared
directory, next to app
directory 2.在shared
目录中,在app
目录旁边创建firestore-trans-loader.ts
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. Prepare your app.module.ts
. 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. And finally use it in your component 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);
}
}
Here you do have complete repo without config where you can find out details (if I forgot about something). 在这里,您确实有没有配置的完整回购,您可以在其中找到详细信息(如果我忘记了某些内容)。
https://github.com/Mr-Eluzive/angularfire-ngx-translate-example Also I have put some work into this so maybe I will try to push it into ngx-translate
repo. https://github.com/Mr-Eluzive/angularfire-ngx-translate-example另外,我已经为此做了一些工作,所以也许我会尝试将其推入ngx-translate
repo。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.