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

我想在Angular应用程序中为每个单独的路线设置一个静态标题（即

）。如果路线不包含标题，则应使用默认标题。每个标题都应该有一个共同的后缀

我可以在每个页面组件中使用

title.setTitle（）

，但是如果组件没有指定标题，则标题不会更改为默认标题。在这种情况下，如何添加公共后缀是另一个问题

或者我可以使用

router.event.subscribe（）

在一个地方管理我的标题，但我不知道如何区分路由或获取当前路由的任何数据

---

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

您可以创建一个专门用于更新标题组件中标题的服务。只需将服务注入头组件并订阅专用的BehaviorSubject。然后，您可以将此服务注入到您拥有的任何组件中，并使用该组件中的

setTitle

方法，该方法将更新header组件中的标题。检查以下代码

代码：

//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');
}

//headerTitle.service.ts
@可注射（）
出口班主任服务{
标题=新行为主体（“初始标题”）；
setTitle（标题：字符串）{
这个。标题。下一个（标题）；
}
}
//header.component.ts
标题=''；
构造函数（私有headerTitleService:headerTitleService）{}
恩戈尼尼特（）{
this.headerTitleService.title.subscribe（updateditle=>{
this.title=更新的标题；
});
}
//header.component.html
{{title}}-后缀title
//关于.component.ts
构造函数（私有headerTitleService:headerTitleService）{}
恩戈尼尼特（）{
this.headerTitleService.setTitle（'About'）；
}

一种方法是订阅

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

。之后，我们应该将其映射到当前路径

数据
参数，然后进行订阅

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

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

请注意，在您的情况下，订阅的实现可能会有所不同，具体取决于您拥有的路由器配置。但是，如果您熟悉
可观察对象
，那么让它工作起来应该并不复杂，这里的目标是访问路由文件中提供的数据对象

文件名称
使用这种方法，您应该能够在Angular的
title
服务的帮助下轻松管理您的
文档。title
，例如：

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

你确定是角度2而不是1吗？@Santossingh，更新后的代码不同。现在是2+这并不能解决默认标题的问题。假设有一个页面，组件不调用
setTitle
。它将保留上一页的标题，而不是切换到默认标题。嗯，我指的是
标签，但这不是必需的。问题是一样的，我试过这个。问题在于
这一点。activatedRoute
指的是顶级组件调用其构造函数时处于活动状态的同一路由。它不会随路由器事件而改变。这很自然，因为它不是事件回调的参数，而只是构造函数的参数，构造函数只调用一次。请参阅我所做的编辑。使用
while
循环将另一个
map（）
添加到链中。这是我的一个应用程序的实际代码，已经过测试。但是，您的路由器配置可能会有所不同。如果有帮助，请告诉我该代码根本不包含任何查找当前路由的方法。这个
while
将
activatedRoute
转换成一个叶子，只有一个叶子，而且总是同一个叶子。正如我所说，它在我的应用程序中确实有效。很难给出一个更精确的例子，因为我还没有看到源代码，所以它将适合您的场景。基本上，这个答案的目的是给你暗示，你对这种方法的猜测是正确的。你只需要根据你的具体情况进一步调查。如果您最终成功，请告诉我：）