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

Question

我试图从路由器更改页面标题,这可以做到吗？

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

Answer 1

Title@EricMartinez指出的服务有一个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));
       });
    }
 }

也就是说,我现在强调,因为路由器仍处于大量开发阶段,我希望(或者至少希望)我们能够RouteConfig在最终版本中完成此操作.

编辑:

截至Angular 2(2.0.0)发布时,一些事情发生了变化:

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

Answer 2

这是我的方法,它工作正常,特别是对于嵌套路由:

我使用递归辅助方法在路由更改后获取最深的可用标题:

@Component({
  selector: 'app',
  template: `
    <h1>{{title | async}}</h1>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private router: Router) {
    this.title = this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.getDeepestTitle(this.router.routerState.snapshot.root));
  }

  title: Observable<string>;

  private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
    var title = routeSnapshot.data ? routeSnapshot.data['title'] : '';
    if (routeSnapshot.firstChild) {
      title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
    }
    return title;
  }
}

这是假设您已在路径的data属性中分配了页面标题,如下所示:

{
  path: 'example',
  component: ExampleComponent,
  data: {
    title: 'Some Page'
  }
}

Answer 3

对于Angular 4+:

如果要使用路径自定义数据为每个路径路径定义页面标题,则以下方法适用于嵌套路径和角度版本4+:

您可以在路径定义中传递页面标题:

  {path: 'home', component: DashboardComponent, data: {title: 'Home Pag'}},
  {path: 'about', component: AboutUsComponent, data: {title: 'About Us Page'}},
  {path: 'contact', component: ContactUsComponent, data: {title: 'Contact Us Pag'}},

现在,在您的上层组件(即AppComponent)中最重要的是,您可以在每次路由更改时全局捕获路由自定义数据并更新页面标题:

import {Title} from "@angular/platform-browser";
export class AppComponent implements OnInit {

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

    ngOnInit() {
         this.router
        .events
        .filter(event => event instanceof NavigationEnd)
        .map(() => {
          let child = this.activatedRoute.firstChild;
          while (child) {
            if (child.firstChild) {
              child = child.firstChild;
            } else if (child.snapshot.data && child.snapshot.data['title']) {
              return child.snapshot.data['title'];
            } else {
              return null;
            }
          }
          return null;
        }).subscribe( (title: any) => {
           this.titleService.setTitle(title);
       });
    }
 }

以上代码针对角度4+进行测试.

Answer 4

它真的很容易做到这一点,您可以按照以下步骤查看即时效果:

我们在bootstrap中提供Title服务:

import { NgModule } from '@angular/core';
import { BrowserModule, Title }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    Title
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

然后在所需的组件中导入此服务:

import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';

@Component({
selector: 'my-app',
template:
  `<p>
    Select a title to set on the current HTML document:
  </p>

  <ul>
    <li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
    <li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
    <li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
  </ul>
  `
})
export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

现在点击这些链接以查看标题更改.

你也可以使用ng2-meta来改变页面标题和描述,你可以参考这个链接:

https://github.com/vinaygopinath/ng2-meta

Answer 5

Angular 2提供了标题服务,请参阅Shailesh答案只是该代码的副本.

我的app.module.ts

import { BrowserModule, Title } from '@angular/platform-browser';
........
providers: [..., Title],
bootstrap: [AppComponent]

现在转到我们的app.component.ts

import { Title }     from '@angular/platform-browser';
......
export class AppComponent {

    public constructor(private titleService: Title ) { }

    public setTitle( newTitle: string) {
      this.titleService.setTitle( newTitle );
    }
}

将标题标记放在组件html上,它将为您读取和设置.

如果您想知道如何动态设置它,请参阅本文