2017-02-22 18:09:39 +00:00
|
|
|
|
{@a top}
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2019-12-02 12:47:19 -08:00
|
|
|
|
# Set the document title
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2017-07-30 00:03:22 +08:00
|
|
|
|
# 设置文档标题
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
Your app should be able to make the browser title bar say whatever you want it to say.
|
2017-04-01 01:57:13 +02:00
|
|
|
|
This cookbook explains how to do it.
|
|
|
|
|
|
|
2020-01-24 17:08:25 +08:00
|
|
|
|
你的应用应该能让浏览器标题栏显示你想让它显示的内容。本文会解释怎么做。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-21 17:21:45 -07:00
|
|
|
|
See the <live-example name="set-document-title"></live-example>.
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2018-03-07 14:35:57 +08:00
|
|
|
|
参见<live-example name="set-document-title"></live-example>
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2017-02-22 18:09:39 +00:00
|
|
|
|
## The problem with *<title>*
|
|
|
|
|
|
|
2017-07-23 11:51:25 +08:00
|
|
|
|
## *<title>*的问题
|
|
|
|
|
|
|
2017-02-22 18:09:39 +00:00
|
|
|
|
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
|
2017-03-30 20:04:18 +01:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
显而易见的方法是把组件的属性绑定到 HTML 的 `<title>` 标签上，像这样：
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-02-22 18:09:39 +00:00
|
|
|
|
<code-example format=''>
|
|
|
|
|
|
<title>{{This_Does_Not_Work}}</title>
|
|
|
|
|
|
</code-example>
|
|
|
|
|
|
|
|
|
|
|
|
Sorry but that won't work.
|
2017-04-12 21:53:18 +02:00
|
|
|
|
The root component of the application is an element contained within the `<body>` tag.
|
2017-02-22 18:09:39 +00:00
|
|
|
|
The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
|
|
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
抱歉，这样不行。应用程序的根组件是一个包含在 `<body>` 标签里的元素。该 HTML 的 `<title>` 在文档的 `<head>` 元素里，在 `<body>` 之外，Angular 的数据绑定无法访问到它。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
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.
|
2017-03-27 16:08:53 +01:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
可以从浏览器获得 `document` 对象，并且手动设置标题。但是这样看起来很脏，而且将无法在浏览器之外运行应用程序。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2018-07-19 15:00:08 -07:00
|
|
|
|
<div class="alert is-helpful">
|
2017-03-27 16:08:53 +01:00
|
|
|
|
|
2017-05-18 21:31:27 +01:00
|
|
|
|
Running your app outside a browser means that you can take advantage of server-side
|
2019-10-26 21:35:03 +07:00
|
|
|
|
pre-rendering for near-instant first app render times and for SEO. It means you could run from
|
|
|
|
|
|
inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
|
2017-05-18 21:31:27 +01:00
|
|
|
|
means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
|
2017-03-27 16:08:53 +01:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
在浏览器外运行应用程序意味着：利用服务器端预先渲染，为应用程序实现几乎实时的首次渲染，同时还能支持 SEO(搜索引擎优化)。
|
|
|
|
|
|
意味着你可以在一个 Web Worker 中运行你的应用程序，通过多线程技术增强应用程序的响应性。
|
|
|
|
|
|
还意味着你可以在 Electron.js 或者 Windows Universal 里面运行，发布到桌面环境。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-10 16:51:13 +01:00
|
|
|
|
</div>
|
2017-03-27 16:08:53 +01:00
|
|
|
|
|
2017-05-18 21:31:27 +01:00
|
|
|
|
## Use the `Title` service
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2017-07-30 00:03:22 +08:00
|
|
|
|
## 使用 `Title` 服务
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-02-22 18:09:39 +00:00
|
|
|
|
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
|
2017-04-30 22:10:32 +02:00
|
|
|
|
The [Title](api/platform-browser/Title) service is a simple class that provides an API
|
2017-02-22 18:09:39 +00:00
|
|
|
|
for getting and setting the current HTML document title:
|
2018-03-03 21:06:01 +08:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
幸运的是，Angular 在*浏览器平台*的包中，提供了一个 `Title` 服务，弥补了这种差异。
|
|
|
|
|
|
[Title](api/platform-browser/Title)服务是一个简单的类，提供了一个 API，用来获取和设置当前 HTML 文档的标题。
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
* `getTitle() : string`—Gets the title of the current HTML document.
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
`getTitle(): string` —— 获取当前 HTML 文档的标题。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-26 15:11:02 +03:00
|
|
|
|
* `setTitle( newTitle : string )`—Sets the title of the current HTML document.
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2018-03-20 17:09:18 +08:00
|
|
|
|
`setTitle( newTitle: string)` —— 设置当前 HTML 文档的标题。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
你可以把 `Title` 服务注入到根组件 `AppComponent`，并暴露出可供绑定的 `setTitle` 方法让别人来调用该服务：
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2019-07-20 20:40:17 +03:00
|
|
|
|
<code-example path="set-document-title/src/app/app.component.ts" region="class" header="src/app/app.component.ts (class)"></code-example>
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
Bind that method to three anchor tags and voilà!
|
2017-03-30 20:04:18 +01:00
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
把这个方法绑定到三个 A 标签，瞧瞧！
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2019-11-11 14:47:51 -08:00
|
|
|
|
<div class="lightbox">
|
2017-05-09 23:53:32 +01:00
|
|
|
|
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
|
2019-11-11 14:47:51 -08:00
|
|
|
|
</div>
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
Here's the complete solution:
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2017-07-23 11:51:25 +08:00
|
|
|
|
这里是完整的方案(代码)。
|
|
|
|
|
|
|
2017-03-27 16:08:53 +01:00
|
|
|
|
<code-tabs>
|
2018-10-11 13:29:59 +02:00
|
|
|
|
<code-pane header="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
|
|
|
|
|
|
<code-pane header="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
|
|
|
|
|
|
<code-pane header="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
|
2017-03-27 16:08:53 +01:00
|
|
|
|
</code-tabs>
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2017-05-18 21:31:27 +01:00
|
|
|
|
## Why provide the `Title` service in `bootstrap`
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2018-03-20 17:15:36 +08:00
|
|
|
|
## 为什么要在 *bootstrap* 里面提供这个 *Title* 服务
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
Generally you want to provide application-wide services in the root application component, `AppComponent`.
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
你通常会在应用程序的根组件 `AppComponent` 中提供应用程序级的服务。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
This cookbook recommends registering the title service during bootstrapping,
|
|
|
|
|
|
a location you reserve for configuring the runtime Angular environment.
|
2017-02-22 18:09:39 +00:00
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
但这里，要在引导过程中注册这个 Title 服务，这个位置是为你设置 Angular 运行环境而保留的。
|
2017-07-23 11:51:25 +08:00
|
|
|
|
|
2017-04-12 21:53:18 +02:00
|
|
|
|
That's exactly what you're doing.
|
2017-02-22 18:09:39 +00:00
|
|
|
|
The `Title` service is part of the Angular *browser platform*.
|
2017-04-12 21:53:18 +02:00
|
|
|
|
If you bootstrap your application into a different platform,
|
2017-04-26 15:11:02 +03:00
|
|
|
|
you'll have to provide a different `Title` service that understands
|
2017-04-12 21:53:18 +02:00
|
|
|
|
the concept of a "document title" for that specific platform.
|
|
|
|
|
|
Ideally, the application itself neither knows nor cares about the runtime environment.
|
2017-04-01 01:57:13 +02:00
|
|
|
|
|
2018-03-22 17:18:48 +08:00
|
|
|
|
你的做法正是如此。这里的 `Title` 服务是 Angular*浏览器平台*的一部分。如果在其它平台上引导应用程序，就得提供另一个专为那个平台准备的 `Title` 服务。
|
