2016-04-10 09:14:24 -04:00
|
|
|
|
include ../_util-fns
|
|
|
|
|
|
|
|
|
|
|
|
a(id='top')
|
|
|
|
|
|
:marked
|
|
|
|
|
|
Our app should be able to make the browser title bar say whatever we want it to say.
|
|
|
|
|
|
This cookbook explains how to do it.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-22 19:26:23 +08:00
|
|
|
|
应用程序应该能让浏览器标题栏显示我们想让它显示的内容。本*烹饪宝典*解释怎么做。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
:marked
|
2016-07-30 21:00:52 -05:00
|
|
|
|
**See the <live-example name="cb-set-document-title"></live-example>**.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-08-06 19:52:08 +08:00
|
|
|
|
**参见<live-example name="cb-set-document-title"></live-example>**。
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
.l-sub-section
|
|
|
|
|
|
img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
|
|
|
|
|
|
:marked
|
2016-08-06 07:45:32 +01:00
|
|
|
|
To see the browser Title bar changes,
|
2016-04-10 09:14:24 -04:00
|
|
|
|
pop out the preview window by clicking the blue 'X' button in the upper right corner.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
|
|
|
|
|
要看到浏览器标题的变化，点击预览窗口右上角的'X'按钮，弹出窗口。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
:marked
|
|
|
|
|
|
## The problem with *<title>*
|
|
|
|
|
|
|
2016-05-07 18:20:40 +01:00
|
|
|
|
## *<title>*的问题
|
|
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
显而易见的方法是把组件的属性绑定到HTML的`<title>`标签上，像这样：
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
code-example(format='')
|
|
|
|
|
|
<title>{{This_Does_Not_Work}}</title>
|
|
|
|
|
|
:marked
|
2016-08-06 07:45:32 +01:00
|
|
|
|
Sorry but that won't work.
|
2016-04-10 09:14:24 -04:00
|
|
|
|
The root component of our 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.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
抱歉，这样不行。我们应用程序的根组件是一个包含在`<body>`标签里的元素。该HTML的`<title>`在文档的`<head>`元素里，在`<body>`之外，Angular的数据绑定无法访问到它。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
2016-08-06 07:45:32 +01:00
|
|
|
|
We could grab the browser `document` object and set the title manually.
|
|
|
|
|
|
That's dirty and undermines our chances of running the app outside of a browser someday.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-06-20 12:29:43 +01:00
|
|
|
|
可以从浏览器获得`document`对象，并且手动设置标题。但是这样看起来很脏，而且将无法在浏览器之外运行应用程序。
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
.l-sub-section
|
|
|
|
|
|
:marked
|
2016-04-26 10:55:31 -07:00
|
|
|
|
Running your app outside a browser means that you can take advantage of server-side
|
|
|
|
|
|
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
|
|
|
|
|
|
means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-06-14 09:26:54 +08:00
|
|
|
|
在浏览器外运行应用程序意味着：利用服务器端预先渲染，为应用程序实现几乎实时的首次渲染，同时还能支持SEO(搜索引擎优化)。
|
2016-05-18 11:38:10 +08:00
|
|
|
|
意味着你可以在一个Web Worker中运行你的应用程序，通过多线程技术增强应用程序的响应性。
|
|
|
|
|
|
还意味着你可以在Electron.js或者Windows Universal里面运行，发布到桌面环境。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
|
|
|
|
|
:marked
|
|
|
|
|
|
## Use the *Title* service
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-05-07 18:20:40 +01:00
|
|
|
|
## 使用*Title*服务
|
|
|
|
|
|
|
2016-09-20 05:24:40 +02:00
|
|
|
|
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
|
2016-07-06 14:39:14 -07:00
|
|
|
|
The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API
|
2016-04-10 09:14:24 -04:00
|
|
|
|
for getting and setting the current HTML document title:
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-09-23 22:13:02 +01:00
|
|
|
|
幸运的是，Angular在*浏览器平台*的包中，提供了一个`Title`服务，弥补了这种差异。
|
2016-05-18 11:38:10 +08:00
|
|
|
|
[Title](../api/platform/browser/Title-class.html)服务是一个简单的类，提供了一个API，用来获取和设置当前HTML文档的标题。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
|
|
|
|
|
* `getTitle() : string` — Gets the title of the current HTML document.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-09-18 10:02:02 +08:00
|
|
|
|
* `getTitle(): string` —— 获取当前HTML文档的标题。
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-08-09 17:38:25 +01:00
|
|
|
|
* `setTitle( newTitle : string )` — Sets the title of the current HTML document.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
* `setTitle( newTitle: string)` —— 设置当前HTML文档的标题。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
|
|
|
|
|
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
我们来把`Title`服务注入到根组件`AppComponent`，并暴露出可供绑定的`setTitle`方法让别人来调用该服务：
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
|
|
|
|
|
+makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.')
|
|
|
|
|
|
:marked
|
2016-05-15 23:03:05 +01:00
|
|
|
|
We bind that method to three anchor tags and, voila!
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
我们把这个方法绑定到三个A标签，瞧瞧！
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
figure.image-display
|
|
|
|
|
|
img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title")
|
|
|
|
|
|
|
|
|
|
|
|
:marked
|
|
|
|
|
|
Here's the complete solution
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-06-14 09:26:54 +08:00
|
|
|
|
这里是完整的方案(代码)。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
2016-08-06 07:45:32 +01:00
|
|
|
|
+makeTabs(
|
2016-04-10 09:14:24 -04:00
|
|
|
|
`cb-set-document-title/ts/app/main.ts,
|
2016-08-09 17:38:25 +01:00
|
|
|
|
cb-set-document-title/ts/app/app.module.ts,
|
2016-04-10 09:14:24 -04:00
|
|
|
|
cb-set-document-title/ts/app/app.component.ts`,
|
|
|
|
|
|
'',
|
2016-08-09 17:38:25 +01:00
|
|
|
|
'app/main.ts, app/app.module.ts, app/app.component.ts' )
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
|
|
|
|
|
//
|
2016-08-06 07:45:32 +01:00
|
|
|
|
Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
|
2016-04-10 09:14:24 -04:00
|
|
|
|
that appears in the window navigation history and shows up in the back/forward buttons
|
|
|
|
|
|
during routing.
|
2016-08-06 07:45:32 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
See https://github.com/angular/angular/issues/7630#issuecomment-198328802
|
2016-08-06 07:45:32 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
.l-main-section
|
|
|
|
|
|
:marked
|
|
|
|
|
|
## Why we provide the *Title* service in *bootstrap*
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-06-20 12:29:43 +01:00
|
|
|
|
## 为什么要在*bootstrap*里面提供这个*Title*服务
|
2016-05-15 23:00:09 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
|
|
|
|
|
|
2016-05-18 11:38:10 +08:00
|
|
|
|
我们通常会推荐在应用程序的根组件`AppComponent`中提供应用程序级的服务。
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
Here we recommend registering the title service during bootstrapping,
|
2016-05-25 19:47:23 +05:30
|
|
|
|
a location we reserve for configuring the runtime Angular environment.
|
2016-04-10 09:14:24 -04:00
|
|
|
|
|
2016-06-20 12:29:43 +01:00
|
|
|
|
但这里，我们推荐在引导过程中注册这个Title服务，这个位置是为设置Angular运行环境而保留的。
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-04-10 09:14:24 -04:00
|
|
|
|
That's exactly what we're doing.
|
2016-08-06 07:45:32 +01:00
|
|
|
|
The `Title` service is part of the Angular *browser platform*.
|
|
|
|
|
|
If we bootstrap our application into a different platform,
|
2016-04-10 09:14:24 -04:00
|
|
|
|
we'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.
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
2016-06-20 12:29:43 +01:00
|
|
|
|
我们的做法正是如此。这里的`Title`服务是Angular*浏览器平台*的一部分。如果在其它平台上引导应用程序，就得提供另一个专为那个平台准备的`Title`服务。
|
2016-04-10 09:14:24 -04:00
|
|
|
|
:marked
|
|
|
|
|
|
[Back to top](#top)
|
2016-05-07 18:20:40 +01:00
|
|
|
|
|
|
|
|
|
|
[回到顶部](#top)
|
