使用Angular 2新路由器更改页面标题

使用新路由器时，在浏览器中更改应用程序页面标题的正确方法是什么

---

*使用Angular 2 CLI

可以直接从组件的构造函数设置标题：

可以使用

要从当前路线获取标题，可以使用

数据

属性

const路由：RouterConfig=[
{
路径：“”，
重定向到：'/login'，
路径匹配：“已满”，
},
{
路径：“登录”，
组件：LoginComponent，
数据：{title:'Login'}
},
{
路径：“家”，
组件：HomeComponent，
数据：{title:'Home'}
},
{
路径：“wepays”，
组件：WePaysComponent，
数据：{title:'WePays'}
}
];

导出类AppComponent{
构造函数（标题服务：标题，路由器：路由器）{
router.events.subscribe（事件=>{
if（NavigationEnd的事件实例）{
var title=this.getTitle（router.routerState，router.routerState.root）.join（'-'）；
console.log（'title'，title）；
titleService.setTitle（标题）；
}
});
}
//从所有子管线收集该标题数据属性
//也许有更好的办法，但这对我很有效
getTitle（状态、父级）{
var数据=[]；
if（parent&&parent.snapshot.data&&parent.snapshot.data.title）{
data.push（parent.snapshot.data.title）；
}
如果（状态和父级）{
data.push（…this.getTitle（state，state.firstChild（parent））；
}
返回数据；
}
}

刚刚发现了一种类似的方法

我还发现了一个更漂亮的代码。

以下代码（摘自：）很有魅力：

const routes:routes=[{
路径：“日历”，
组件：日历组件，
儿童：[
{路径：''，重定向到：'new'，路径匹配：'full'}，
{path:'all'，component:CalendarListComponent，data:{title:'My Calendar'}，
{路径：'new'，组件：CalendarEventComponent，数据：{title:'new Calendar Entry'}，
{路径：':id'，组件：CalendarEventComponent，数据：{title:'日历条目'}}
]
}];

然后是

AppComponent

导入'rxjs/add/operator/filter'；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/mergeMap'；
从“@angular/core”导入{Component，OnInit}；
从'@angular/Router'导入{Router，NavigationEnd，ActivatedRoute}；
从“@angular/platform browser”导入{Title}；
@组件（{…}）
导出类AppComponent实现OnInit{
建造师(
专用路由器：路由器，
私有激活路由：激活路由，
私人产权服务：产权
) {}
恩戈尼尼特（）{
这是路由器事件
.filter（事件=>NavigationEnd的事件实例）
.map（（）=>this.activatedRoute）
.map（路线=>{
而（route.firstChild）route=route.firstChild；
返回路线；
})
.filter（route=>route.outlet=='primary'）
.mergeMap（route=>route.data）
.subscribe（（事件）=>this.titleService.setTitle（事件['title']）；
}
}

这是一个很长的代码行，仅用于获取数据：{title}路由的标题不适用于嵌套/链接标题（ParentRoute title[separator]ChildRoute title）。接受的答案是完整的解决方案。它是否适用于load

{path:'：shipmentId'，canActivate:[SessionGuardService]，loadChildren:'app/edit Shipping/edit Shipping.module#EditShipmentModule'，数据：{title:PageTitle.editShipmentPage}

,，注意，当定义的路由来自LazyLoading时，标题没有设置第一次加载是什么？有什么问题？router.events.subscribe。。。对路由器更改非常有效，但它不是第一次加载页面时触发的，因此没有标题对我有效this.activatedRoute.data.map（（）=>this.activatedRoute.map（（route）=>{while（route.firstChild）route=route.firstChild；return route；}）.mergeMap（（route）=>route.data）.subscribe（event=>{this.title=event['title']；this.titleService.setTitle（event['title']）；}）；由于RouterState不公开firstChild函数，如果严格键入，typescript将抛出错误。更好的改进是使用以下代码。第一次调用组件时可以使用这些代码，但在后续调用时不能使用。@BillyTom您知道如何让它在后续调用中使用吗？请查看此示例教程了解Angular 9应用程序