使用路由数据的带后缀词的动态页面标题 angular 5

Question

我正在使用 angular 5 并遇到问题。我想更改我的页面标题 dynamic.Already 我做到了但是我没有在页面标题后添加后缀。假设我的页面标题为 Home，我想添加后缀为 Home |我的标题。请帮我解决这个问题。

这是我的代码..

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}`);

使用路由数据的带后缀词的动态页面标题 angular 5

Dynamic page title with suffix word using routing data angular 5

typescript

angular-routing

suffix

angular