Angular

应用程序应该能让浏览器标题栏显示我们想让它显示的内容。本烹饪宝典解释怎么做。

参见live example / downloadable example。

要在在线例子中看到浏览器标题的变化，请点击右上角的图标在Plunker编辑器中打开它，然后点击预览窗口右上角的蓝色'X'按钮，弹出窗口。

<title>的问题

显而易见的方法是把组件的属性绑定到HTML的<title>标签上，像这样：

The obvious approach is to bind a property of the component to the HTML <title> like this:

<title>{{This_Does_Not_Work}}</title>

抱歉，这样不行。我们应用程序的根组件是一个包含在<body>标签里的元素。该HTML的<title>在文档的<head>元素里，在<body>之外，Angular的数据绑定无法访问到它。

Sorry but that won't work. The root component of the application is an element contained within the <body> tag. The HTML <title> is in the document <head>, outside the body, making it inaccessible to Angular data binding.

可以从浏览器获得document对象，并且手动设置标题。但是这样看起来很脏，而且将无法在浏览器之外运行应用程序。

You could grab the browser document object and set the title manually. That's dirty and undermines your chances of running the app outside of a browser someday.

在浏览器外运行应用程序意味着：利用服务器端预先渲染，为应用程序实现几乎实时的首次渲染，同时还能支持SEO(搜索引擎优化)。意味着你可以在一个Web Worker中运行你的应用程序，通过多线程技术增强应用程序的响应性。还意味着你可以在Electron.js或者Windows Universal里面运行，发布到桌面环境。

使用Title服务

幸运的是，Angular在浏览器平台的包中，提供了一个Title服务，弥补了这种差异。 Title服务是一个简单的类，提供了一个API，用来获取和设置当前HTML文档的标题。

Fortunately, Angular bridges the gap by providing a Title service as part of the Browser platform. The Title service is a simple class that provides an API for getting and setting the current HTML document title:

getTitle(): string —— 获取当前HTML文档的标题。
getTitle() : string—Gets the title of the current HTML document.

setTitle( newTitle: string) —— 设置当前HTML文档的标题。
setTitle( newTitle : string )—Sets the title of the current HTML document.

我们来把Title服务注入到根组件AppComponent，并暴露出可供绑定的setTitle方法让别人来调用该服务：

You can inject the Title service into the root AppComponent and expose a bindable setTitle method that calls it:

src/app/app.component.ts (class)export class AppComponent {
  public constructor(private titleService: Title ) { }

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

我们把这个方法绑定到三个A标签，瞧瞧！

这里是完整的方案(代码)。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

// Import the native Angular services.
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 );
  }
}

为什么要在bootstrap里面提供这个Title服务

我们通常会推荐在应用程序的根组件AppComponent中提供应用程序级的服务。

Generally you want to provide application-wide services in the root application component, AppComponent.

但这里，我们推荐在引导过程中注册这个Title服务，这个位置是为设置Angular运行环境而保留的。

我们的做法正是如此。这里的Title服务是Angular浏览器平台的一部分。如果在其它平台上引导应用程序，就得提供另一个专为那个平台准备的Title服务。

That's exactly what you're doing. The Title service is part of the Angular browser platform. If you bootstrap your application into a different platform, you'll have to provide a different Title service that understands the concept of a "document title" for that specific platform. Ideally, the application itself neither knows nor cares about the runtime environment.

回到顶部

设置文档标题

<title>的问题

The problem with <title>

使用Title服务

Use the Title service

src/app/app.component.ts (class)

为什么要在bootstrap里面提供这个Title服务

Why provide the Title service in bootstrap