Angular 5基于路由数据实现带后缀的动态页面标题

嘿，这个问题处理起来超简单！你只需要在设置页面标题的环节，把路由里的title字段和你想要的后缀拼接起来就行啦～

基础解决方案 #

直接修改你订阅路由事件的代码，在setTitle方法里合并标题与后缀：

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) => {
        // 拼接路由标题和固定后缀
        const fullTitle = `${event['title']} | My Title`;
        this.titleService.setTitle(fullTitle);
    });

这样配置后，当你跳转到首页时，页面标题就会自动变成Home | My Title，完美满足你的需求。

进阶优化方案（可选） #

如果后续需要灵活修改后缀，或者想让部分页面不显示后缀，可以做以下优化：

1. 先把后缀定义为一个常量，方便后续统一修改：

private readonly titleSuffix = ' | My Title';

2. 修改订阅逻辑，支持路由配置里的自定义开关：

.subscribe((event) => {
    let fullTitle = event['title'];
    // 只有当路由data里没设置hideSuffix时，才添加后缀
    if (!event['hideSuffix']) {
        fullTitle += this.titleSuffix;
    }
    this.titleService.setTitle(fullTitle);
});

3. 如果某个页面不需要显示后缀，路由配置可以这么写：

{ 
    path: 'special', 
    component: SpecialComponent, 
    data: { title: 'Special Page', hideSuffix: true } 
}

这样就能根据不同页面的需求灵活控制标题显示啦～

内容的提问来源于stack exchange，提问作者raihan