angular-cn/aio/content/guide/set-document-title.md

125 lines
5.3 KiB
Markdown
Raw Normal View History

{@a top}
2017-03-31 19:57:13 -04:00
# Set the Document Title
2017-03-31 19:57:13 -04:00
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cb-index.md # aio/content/guide/change-log.md # aio/content/guide/cheatsheet.md # aio/content/guide/cli-quickstart.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/dynamic-form.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/i18n.md # aio/content/guide/index.md # aio/content/guide/learning-angular.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule.md # aio/content/guide/npm-packages.md # aio/content/guide/pipes.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/router.md # aio/content/guide/security.md # aio/content/guide/server-communication.md # aio/content/guide/set-document-title.md # aio/content/guide/setup-systemjs-anatomy.md # aio/content/guide/setup.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/ts-to-js.md # aio/content/guide/typescript-configuration.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/visual-studio-2015.md # aio/content/guide/webpack.md # aio/content/navigation.json # aio/content/tutorial/index.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/package.json # aio/src/styles/main.scss # aio/transforms/angular.io-package/index.js
2017-07-29 12:03:22 -04:00
# 设置文档标题
2017-03-31 19:57:13 -04:00
Your app should be able to make the browser title bar say whatever you want it to say.
2017-03-31 19:57:13 -04:00
This cookbook explains how to do it.
应用程序应该能让浏览器标题栏显示我们想让它显示的内容。本*烹饪宝典*解释怎么做。
See the <live-example name="set-document-title"></live-example>.
2017-03-31 19:57:13 -04:00
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cb-index.md # aio/content/guide/change-log.md # aio/content/guide/cheatsheet.md # aio/content/guide/cli-quickstart.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/dynamic-form.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/i18n.md # aio/content/guide/index.md # aio/content/guide/learning-angular.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule.md # aio/content/guide/npm-packages.md # aio/content/guide/pipes.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/router.md # aio/content/guide/security.md # aio/content/guide/server-communication.md # aio/content/guide/set-document-title.md # aio/content/guide/setup-systemjs-anatomy.md # aio/content/guide/setup.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/ts-to-js.md # aio/content/guide/typescript-configuration.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/visual-studio-2015.md # aio/content/guide/webpack.md # aio/content/navigation.json # aio/content/tutorial/index.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/package.json # aio/src/styles/main.scss # aio/transforms/angular.io-package/index.js
2017-07-29 12:03:22 -04:00
参见<live-example name="set-document-title"></live-example>
2017-03-31 19:57:13 -04:00
## The problem with *&lt;title&gt;*
## *&lt;title&gt;*的问题
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
显而易见的方法是把组件的属性绑定到HTML的`<title>`标签上,像这样:
<code-example format=''>
&lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
</code-example>
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.
抱歉,这样不行。我们应用程序的根组件是一个包含在`<body>`标签里的元素。该HTML的`<title>`在文档的`<head>`元素里,在`<body>`之外Angular的数据绑定无法访问到它。
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.
可以从浏览器获得`document`对象,并且手动设置标题。但是这样看起来很脏,而且将无法在浏览器之外运行应用程序。
2017-04-10 11:51:13 -04:00
<div class="l-sub-section">
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里面运行发布到桌面环境。
2017-04-10 11:51:13 -04:00
</div>
## Use the `Title` service
2017-03-31 19:57:13 -04:00
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cb-index.md # aio/content/guide/change-log.md # aio/content/guide/cheatsheet.md # aio/content/guide/cli-quickstart.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/dynamic-form.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/i18n.md # aio/content/guide/index.md # aio/content/guide/learning-angular.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule.md # aio/content/guide/npm-packages.md # aio/content/guide/pipes.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/router.md # aio/content/guide/security.md # aio/content/guide/server-communication.md # aio/content/guide/set-document-title.md # aio/content/guide/setup-systemjs-anatomy.md # aio/content/guide/setup.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/ts-to-js.md # aio/content/guide/typescript-configuration.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/visual-studio-2015.md # aio/content/guide/webpack.md # aio/content/navigation.json # aio/content/tutorial/index.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/package.json # aio/src/styles/main.scss # aio/transforms/angular.io-package/index.js
2017-07-29 12:03:22 -04:00
## 使用 `Title` 服务
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
The [Title](api/platform-browser/Title) service is a simple class that provides an API
for getting and setting the current HTML document title:
幸运的是Angular在*浏览器平台*的包中,提供了一个`Title`服务,弥补了这种差异。
2017-07-30 00:32:56 -04:00
[Title](api/platform-browser/Title)服务是一个简单的类提供了一个API用来获取和设置当前HTML文档的标题。
* `getTitle() : string`&mdash;Gets the title of the current HTML document.
`getTitle(): string` —— 获取当前HTML文档的标题。
* `setTitle( newTitle : string )`&mdash;Sets the title of the current HTML document.
`setTitle( newTitle: string)` —— 设置当前HTML文档的标题。
You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
我们来把`Title`服务注入到根组件`AppComponent`,并暴露出可供绑定的`setTitle`方法让别人来调用该服务:
<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>
2017-03-31 19:57:13 -04:00
Bind that method to three anchor tags and voilà!
我们把这个方法绑定到三个A标签瞧瞧
docs(aio): image sweep (#16609) * fix(aio): allow code blocks to clear floated images Previously the negative margin on the code headings were causing floated images to overlay the start of a code block. Now all code block successfully clear all floated elements. * feat(aio): add a `.clear` class for clearing floating images * fix(aio): tidy up image styles The css rules for `img.right` and `img.left` allow authors easy access to floating an image on the left or right, respectively. The `.image-display` rule which was always found on a figure has been simplified so that all figures have this styling. It is very unlikely that a figure will be used outside the content area; and at this time it seems like `figure` is as good an indicator that we want this kind of styling as anything. Now that images are all tagged with width and height values, we cannot assume to modify these dimensions via CSS as it can cause the image to lose its correct proportions. Until we find a better solition we must set `height` to `auto` when the screen width is below 1300px to ensure that these images maintain their proportions as they get shrunk to fit. * docs(aio): general tidy up of image HTML in guides Previously, the guides have a lot of inline image styling and unnecessary use of the `image-display` css class. Images over 700px are problematic for guide docs, so those have been given specific widths and associated heights. * docs(aio): use correct anchor for "back to the top" link The `#toc` anchor does not work when the page is wide enough that the TOC is floating to the side. * build(aio): add `#top-of-page` to path variants for link checking Since the `#top-of-page` is outside the rendered docs the `checkAnchorLinks` processor doesn't find them as valid targets for links. Adding them as a `pathVariant` solves this problem but will still catch links to docs that do not actually exist. * fix(aio): ensure that headings clear floated images * fix(aio): do not force live-example embedded image to 100% size This made them look too big, generally. Leaving them with no size means that they will look reasonable in large viewports and switch to 100% width in narrow viewports.
2017-05-09 18:53:32 -04:00
<figure>
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
</figure>
Here's the complete solution:
这里是完整的方案(代码)。
<code-tabs>
<code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
<code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
<code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
</code-tabs>
## Why provide the `Title` service in `bootstrap`
## 为什么要在*bootstrap*里面提供这个*Title*服务
Generally you want to provide application-wide services in the root application component, `AppComponent`.
我们通常会推荐在应用程序的根组件`AppComponent`中提供应用程序级的服务。
This cookbook recommends registering the title service during bootstrapping,
a location you reserve for configuring the runtime Angular environment.
但这里我们推荐在引导过程中注册这个Title服务这个位置是为设置Angular运行环境而保留的。
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.
2017-03-31 19:57:13 -04:00
我们的做法正是如此。这里的`Title`服务是Angular*浏览器平台*的一部分。如果在其它平台上引导应用程序,就得提供另一个专为那个平台准备的`Title`服务。