带有后缀单词的动态页面标题，使用路由数据角度 5

Question

我正在使用角度 5 并面临一个问题.我想更改我的页面标题动态。我已经这样做了，但我没有在页面标题后添加后缀。假设我的页面标题为主页，我想添加后缀为主页 |我的头衔。请帮我解决这个问题。

这是我的代码。

app.component.ts file
 // imported 
 import {Component, OnInit} from '@angular/core';
 import {Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
 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(event['title']));

my routing file
{
 path: '', 
 component: HomeComponentComponent, 
 pathMatch: 'full', 
 data: { title: 'Home' }  
},

动态页面标题工作正常。我想在页面标题后添加后缀作为主页 |我的头衔请帮我解决这个问题...

Answer 1

而不是：

.subscribe((event) => this.titleService.setTitle(event['title']));

做

.subscribe((event) => this.titleService.setTitle(`${event['title']} | ${myTitle}`));

或者创建您自己的myTitleService来包装 Angular 标题服务，以便当您这样做时

this.myTitleService.setTitle(event['title']));

它会调用

this.titleService.setTitle(`${title} | ${globalTitle}`);