Question

我想为Angular应用中的每个单独路线设置静态标题（即<title>）。如果路线不包含标题，则应该具有默认标题。每个标题都应该有一个共同的后缀。

我可以在每个页面组件中使用title.setTitle()，但如果组件没有指定标题，则标题不会更改为默认标题。如何添加公共后缀是此方案中的另一个问题。

或者我可以使用router.event.subscribe()在一个地方管理我的标题，但我不知道如何区分路线或获取当前路线的任何数据。

在Angular应用程序中管理标题的正确和干净的方法是什么？

Answer 1

您可以创建专用于更新标题组件中标题的服务。只需在头部组件中注入服务并订阅专用的BehaviorSubject即可。然后，您可以在您拥有的任何组件中注入此服务，并使用该组件中的setTitle方法，该方法将更新标头组件中的标题。请查看以下代码。

代码：

//headerTitle.service.ts
@Injectable()
export class headerTitleService {
  title = new BehaviorSubject('Initial Title');

  setTitle(title: string) {
    this.title.next(title);
  }
}

//header.component.ts
title = '';

constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.title.subscribe(updatedTitle => {
    this.title = updatedTitle;
  });
}

//header.component.html
<h1>{{title}} - Suffix title</h1>

//about.component.ts
constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.setTitle('About');
}

Answer 2

正如您在问题中已经提到的，执行此操作的一种方法是订阅router.event。让我们假设您有一些顶级组件，您想要显示标题。您需要订阅路由器事件，如下所示：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

...

title: string;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {}

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: NavigationEnd) => {
        this.title = event['title'] || 'Default Title';
      });
}

在订阅路由器事件更改之前，我们会过滤它们以获取特定的事件类型：在我们的案例中为NavigationEnd。在我们应该映射它以获得当前路由data参数之后我们进行订阅。

然后，您只需在路由文件中指定所需的标题：

  {
    path: 'home',
    component: HomeComponent,
    data: { title: 'Home Title' },
  }

请注意，根据您使用的路由器配置，订阅的实施可能会有所不同。但是，如果您熟悉Observables，那么让它变得复杂并不复杂，这里的目标是访问您在路由文件中提供的数据对象。

document.title时

使用此方法，您应该可以在Angular的document.title服务的帮助下轻松管理Title，如下所示：

import { Title } from '@angular/platform-browser';
...
constructor(private titleService: Title) {}
...
this.titleService.setTitle('Home Title');

如何在Angular 2中为不同的路线设置标题？

2 个答案:

document.title时