5 lines
8.5 KiB
JSON
5 lines
8.5 KiB
JSON
{
|
|
"id": "guide/set-document-title",
|
|
"title": "Set the document title",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/set-document-title.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <a id=\"top\"></a>\n<h1 id=\"set-the-document-title\">Set the document title<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/set-document-title#set-the-document-title\"><i class=\"material-icons\">link</i></a></h1>\n<p>Your app should be able to make the browser title bar say whatever you want it to say.\nThis cookbook explains how to do it.</p>\n<p>See the <live-example name=\"set-document-title\"></live-example>.</p>\n<h2 id=\"the-problem-with-title\">The problem with <em><title></em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/set-document-title#the-problem-with-title\"><i class=\"material-icons\">link</i></a></h2>\n<p>The obvious approach is to bind a property of the component to the HTML <code><title></code> like this:</p>\n<code-example format=\"\">\n <title>{{This_Does_Not_Work}}</title>\n</code-example>\n<p>Sorry but that won't work.\nThe root component of the application is an element contained within the <code><body></code> tag.\nThe HTML <code><title></code> is in the document <code><head></code>, outside the body, making it inaccessible to Angular data binding.</p>\n<p>You could grab the browser <code>document</code> object and set the title manually.\nThat's dirty and undermines your chances of running the app outside of a browser someday.</p>\n<div class=\"alert is-helpful\">\n<p> Running your app outside a browser means that you can take advantage of server-side\npre-rendering for near-instant first app render times and for SEO. It means you could run from\ninside a Web Worker to improve your app's responsiveness by using multiple threads. And it\nmeans that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.</p>\n</div>\n<h2 id=\"use-the-title-service\">Use the <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/set-document-title#use-the-title-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>Fortunately, Angular bridges the gap by providing a <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service as part of the <em>Browser platform</em>.\nThe <a href=\"api/platform-browser/Title\">Title</a> service is a simple class that provides an API\nfor getting and setting the current HTML document title:</p>\n<ul>\n<li><code>getTitle() : string</code>—Gets the title of the current HTML document.</li>\n<li><code>setTitle( newTitle : string )</code>—Sets the title of the current HTML document.</li>\n</ul>\n<p>You can inject the <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service into the root <code>AppComponent</code> and expose a bindable <code>setTitle</code> method that calls it:</p>\n<code-example path=\"set-document-title/src/app/app.component.ts\" region=\"class\" header=\"src/app/app.component.ts (class)\">\nexport class AppComponent {\n public constructor(private titleService: <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a>) { }\n\n public setTitle(newTitle: string) {\n this.titleService.setTitle(newTitle);\n }\n}\n\n</code-example>\n<p>Bind that method to three anchor tags and voilà!</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/set-document-title/set-title-anim.gif\" alt=\"Set title\" width=\"596\" height=\"316\">\n</div>\n<p>Here's the complete solution:</p>\n<code-tabs>\n <code-pane header=\"src/main.ts\" path=\"set-document-title/src/main.ts\">\nimport { <a href=\"api/core/enableProdMode\" class=\"code-anchor\">enableProdMode</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n <a href=\"api/core/enableProdMode\" class=\"code-anchor\">enableProdMode</a>();\n}\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n\n</code-pane>\n <code-pane header=\"src/app/app.module.ts\" path=\"set-document-title/src/app/app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>, <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a> } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>\n ],\n declarations: [\n AppComponent\n ],\n providers: [\n <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a>\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n</code-pane>\n <code-pane header=\"src/app/app.component.ts\" path=\"set-document-title/src/app/app.component.ts\">\n// Import the native Angular services.\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a> } from '@angular/platform-browser';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-root',\n template: `\n <p>\n Select a title to set on the current HTML document:\n </p>\n\n <ul>\n <li><a (click)=\"setTitle('Good morning!')\">Good morning</a>.</li>\n <li><a (click)=\"setTitle('Good afternoon!')\">Good afternoon</a>.</li>\n <li><a (click)=\"setTitle('Good evening!')\">Good evening</a>.</li>\n </ul>\n `,\n})\nexport class AppComponent {\n public constructor(private titleService: <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a>) { }\n\n public setTitle(newTitle: string) {\n this.titleService.setTitle(newTitle);\n }\n}\n\n\n</code-pane>\n</code-tabs>\n<h2 id=\"why-provide-the-title-service-in-bootstrap\">Why provide the <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service in <code>bootstrap</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/set-document-title#why-provide-the-title-service-in-bootstrap\"><i class=\"material-icons\">link</i></a></h2>\n<p>Generally you want to provide application-wide services in the root application component, <code>AppComponent</code>.</p>\n<p>This cookbook recommends registering the title service during bootstrapping,\na location you reserve for configuring the runtime Angular environment.</p>\n<p>That's exactly what you're doing.\nThe <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service is part of the Angular <em>browser platform</em>.\nIf you bootstrap your application into a different platform,\nyou'll have to provide a different <code><a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a></code> service that understands\nthe concept of a \"document title\" for that specific platform.\nIdeally, the application itself neither knows nor cares about the runtime environment.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/example-apps-list\n-->\n<!-- links from this doc:\n - api/core/Component\n - api/core/NgModule\n - api/core/enableProdMode\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - api/platform-browser/Title\n - guide/set-document-title#set-the-document-title\n - guide/set-document-title#the-problem-with-title\n - guide/set-document-title#use-the-title-service\n - guide/set-document-title#why-provide-the-title-service-in-bootstrap\n - https://github.com/angular/angular/edit/master/aio/content/guide/set-document-title.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |