146 lines
7.2 KiB
Plaintext
146 lines
7.2 KiB
Plaintext
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.
|
||
|
||
应用程序应该能让浏览器标题栏显示我们想要它显示的内容。本*食谱*解释怎么做。
|
||
:marked
|
||
**See the [live example](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
|
||
|
||
**参见[在线例子](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
|
||
|
||
.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
|
||
To see the browser Title bar changes,
|
||
pop out the preview window by clicking the blue 'X' button in the upper right corner.
|
||
|
||
要看到浏览器标题的变化，点击预览窗口右上角的'X'按钮，弹出窗口。
|
||
:marked
|
||
## The problem with *<title>*
|
||
|
||
## *<title>*的问题
|
||
|
||
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
|
||
|
||
最显然的方法是绑定一个组件属性到HTML的`<title>`标签上，像这样：
|
||
|
||
code-example(format='')
|
||
<title>{{This_Does_Not_Work}}</title>
|
||
:marked
|
||
Sorry but that won't work.
|
||
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.
|
||
|
||
对不起，但是这样不行。我们应用程序的是一个被包含在`<body>`标签里的元素。该HTML`<title>`在文档的`<head>`元素里，在主体内容之外，Angular的数据绑定无法访问它。
|
||
|
||
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.
|
||
|
||
我们可以得到浏览器的`document`对象，并且手动设置标题。但是这样不干净，并且我们无法在将来在浏览器之外运行应用程序。
|
||
|
||
.l-sub-section
|
||
:marked
|
||
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.
|
||
|
||
在浏览器之外运行应用程序的意思是：利用服务器端预先渲染，实现几乎即时的第一应用程序渲染时间，同时支持SEO（搜索引擎优化）。它意味着你可以在一个
|
||
Web Worker中运行你的应用程序，通过使用多个线程增强应用程序的响应性。它还意味着你可以在Electron.js或者Windows Universal里面运行，发布给桌面（环境）。
|
||
|
||
:marked
|
||
## Use the *Title* service
|
||
|
||
## 使用*Title*服务
|
||
|
||
Fortunately, Angular 2 bridges the gap by providing a `Title` service as part of the *Browser platform*.
|
||
The [Title](../api/platform/browser/Title-class.html) service is a simple class that provides an API
|
||
for getting and setting the current HTML document title:
|
||
|
||
幸运的是，Angular 2在*Browser platform*包中，提供了一个`Title`服务，桥接这个间隔。
|
||
[Title](../api/platform/browser/Title-class.html)服务是一个简单地类，提供了一个API，用来获取和设置当前HTML文档的标题。
|
||
|
||
* `getTitle() : string` — Gets the title of the current HTML document.
|
||
|
||
*`getTitle():string` — 获取当前HTML文档的标题。
|
||
|
||
* `setTitle( newTitle : string )` — Sets the title of the current HTML document.
|
||
|
||
* `setTitle( newTitle: string)` — 设置当前HTML文档的标题。
|
||
|
||
While this class is part of the Browser platform package, it is *not part of the default Browser
|
||
platform providers* that Angular loads automatically.
|
||
This means as we bootstrap our application using the Browser platform `boostrap()`
|
||
function, we'll also have to include `Title` service explicitly as one of the bootstrap providers:
|
||
|
||
虽然该类是Browser platform包的一部分，它*不是*Angular自动默认装载的*Browser platform providers的一部分*。
|
||
这意味着，我们在使用Browser platform的`bootstrap()`函数来引导我们的应用程序时，我们必须要明确地把`Title`服务作为引导的供应商之一加入进来：
|
||
|
||
+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.')
|
||
:marked
|
||
Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our
|
||
custom application components and services.
|
||
|
||
一旦我们明确的提供了`Title`服务，我们就能把`Title`服务注入到任何一个应用程序内组件和服务里面。
|
||
|
||
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
|
||
|
||
让我们把`Title`服务注入到根`AppComponent`组件，并暴露可以绑定的`setTitle`方法来调用该服务：
|
||
|
||
+makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.')
|
||
:marked
|
||
We bind that method to three anchor tags and, voila!
|
||
|
||
我们绑定这个方法到三个锚标签，瞧瞧！
|
||
|
||
figure.image-display
|
||
img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title")
|
||
|
||
:marked
|
||
Here's the complete solution
|
||
|
||
这里是完整的方案（代码）。
|
||
|
||
+makeTabs(
|
||
`cb-set-document-title/ts/app/main.ts,
|
||
cb-set-document-title/ts/app/app.component.ts`,
|
||
'',
|
||
'app/main.ts, app/app.component.ts' )
|
||
|
||
//
|
||
Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
|
||
that appears in the window navigation history and shows up in the back/forward buttons
|
||
during routing.
|
||
|
||
See https://github.com/angular/angular/issues/7630#issuecomment-198328802
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Why we provide the *Title* service in *bootstrap*
|
||
|
||
## 我们为什么在*bootstrap*里面提供这个*Title*服务
|
||
|
||
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
||
|
||
我们一般推荐在应用程序的根组件`AppComponent`提供应用程序全范围服务。
|
||
|
||
Here we recommend registering the title service during bootstrapping,
|
||
a location we reserve for configuring the runtime Angular enviroment.
|
||
|
||
这里，我们推荐在引导过程中注册这个标题服务，一个我们为设置Angular运行环境而保留的地方。
|
||
|
||
That's exactly what we're doing.
|
||
The `Title` service is part of the Angular *browser platform*.
|
||
If we bootstrap our application into a different platform,
|
||
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.
|
||
|
||
这正好是我们要做的。`Title`服务是Angular *browser platform*的一部分。如果我们在另一个不同的平台上引导我们的应用程序，我们将会提供一个不同的，专门为这个平台准备的`Title`服务。
|
||
:marked
|
||
[Back to top](#top)
|
||
|
||
[回到顶部](#top)
|