アプリに多言語の可能性を実装しようとしていますが、ngx-translate
. 今、私のアプリは言語を英語からロシア語に切り替える可能性があり、正常に動作しますが、私のアプリには dynamic が必要page title
です。私はTitle
サービスを使用していますが、それも問題なく動作しますが、言語を切り替えるtitle
とデフォルトの言語のままです。
アプリで動的に翻訳されたタイトルを取得するにはどうすればよいですか???
〜文法上の誤りをお詫びします
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// i18n
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// i18n function
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.companent.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor (
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title,
private translateService: TranslateService
) { }
ngOnInit() {
this.defaultLanguage();
this.routerTitle();
}
routerTitle() {
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter((route) => route.outlet === 'primary')
.mergeMap((route) => route.data)
.subscribe((event) => this.titleService.setTitle(this.translateService.instant(event['title'])));
}
defaultLanguage() {
this.translateService.addLangs(['tj', 'ru', 'en']);
let lang = localStorage.getItem('language');
if(lang !== null) {
this.translateService.use(lang);
}
else {
this.translateService.setDefaultLang('tj');
}
}
switchLanguage(language: string) {
this.translateService.use(language);
localStorage.setItem('language', language);
}
}