使用路由器事件在Angular 2中显示已翻译的动态页面标题

时间:2017-07-18 07:00:25

标签: angular2-routing translation router angular2-services

我必须显示每个页面的翻译标题。

我已在subscribe()中实施了上述代码并添加了翻译,如下所示:

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import { TranslateService } from '@ngx-translate/core';
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private translate: TranslateService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
 ngOnInit() {
   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.translate.instant(event['title']));
  }
}

在路由模块中,我将翻译的密钥作为标题传递:

const routes: Routes = [
    { path: 'buildings', component : BuildingsComponent, data : {title : 'BUILDINGS' }}
];

正常情况下工作正常。但是在页面刷新时,它并没有翻译标题。我在页面刷新时收到订阅者event['title']

我没有得到如何解决它。 请帮忙。

谢谢:)

0 个答案:

没有答案