typescript - 如何在angular2路由器中更改页面标题

Question

我正在尝试从路由器更改页面标题，可以这样做吗？

import {RouteConfig} from 'angular2/router';
@RouteConfig([
  {path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {}

Answer 1

Title service @EricMartinez points out有一个 setTitle() 方法 - 这就是设置标题所需的全部。

就在路线更改时自动执行此操作而言，截至目前除了订阅 Router 之外没有内置的方法来执行此操作并在回调中调用 setTitle():

import {RouteConfig} from 'angular2/router';
import {Title} from 'angular2/platform/browser';

@RouteConfig([
  {path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {
    constructor(router:Router, title:Title) {
       router.events.subscribe((event)=>{ //fires on every URL change
          title.setTitle(getTitleFor(router.url));
       });
    }
 }

就是说，我强调 as of now 因为路由器仍在大力开发中，我希望(或至少希望)我们能够通过 RouteConfig 做到这一点 在最终版本中。

编辑:

随着 Angular 2 (2.0.0) 的发布，一些事情发生了变化:

• Title 服务的文档现在在这里:https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html
• 服务是从'@angular/platform-b​​rowser'导入的