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\"
|
||
|
|
}
|