5 lines
25 KiB
JSON
5 lines
25 KiB
JSON
|
{
|
||
|
|
"id": "guide/zone",
|
||
|
|
"title": "NgZone",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/zone.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 <h1 id=\"ngzone\">NgZone<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/zone#ngzone\"><i class=\"material-icons\">link</i></a></h1>\n<p>A zone is an execution context that persists across async tasks. You can think of it as <a href=\"https://en.wikipedia.org/wiki/Thread-local_storage\">thread-local storage</a> for JavaScript VMs.\nThis guide describes how to use Angular's NgZone to automatically detect changes in the component to update HTML.</p>\n<h2 id=\"fundamentals-of-change-detection\">Fundamentals of change detection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/zone#fundamentals-of-change-detection\"><i class=\"material-icons\">link</i></a></h2>\n<p>To understand the benefits of <code><a href=\"api/core/NgZone\" class=\"code-anchor\">NgZone</a></code>, it is important to have a clear grasp of what change detection is and how it works.</p>\n<h3 id=\"displaying-and-updating-data-in-angular\">Displaying and updating data in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/zone#displaying-and-updating-data-in-angular\"><i class=\"material-icons\">link</i></a></h3>\n<p>In Angular, you can display data by binding controls in an HTML template to the properties of an Angular component.</p>\n<code-example path=\"displaying-data/src/app/app.component.1.ts\" header=\"src/app/app.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-root',\n template: `\n <h1>{{title}}</h1>\n <h2>My favorite hero is: {{myHero}}</h2>\n `\n})\nexport class AppComponent {\n title = 'Tour of Heroes';\n myHero = 'Windstorm';\n}\n\n\n</code-example>\n<p>In addition, you can bind DOM events to a method of an Angular component. In such methods, you can also update a property of the Angular component, which updates the corresponding data displayed in the template.</p>\n<code-example path=\"user-input/src/app/click-me.component.ts\" region=\"click-me-component\" header=\"src/app/click-me.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-click-me',\n template: `\n <button (click)=\"onClickMe()\">Click me!</button>\n {{clickMessage}}`\n})\nexport class ClickMeComponent {\n clickMessage = '';\n\n onClickMe() {\n this.clickMessage = 'You are my hero!';\n }\n}\n\n</code-example>\n<p>In both of the above examples, the component's code updates only the property of the component.\nHowever, the HTML is also updated automatically.\nThis guide describes how and when Angular renders the HTML based on the data from the Angular component.</p>\n<h3 id=\"detecting-changes-with-plain-javascript\">Detecting changes with plain JavaScript<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/zone#detecting-changes-with-plain-javascript\"><i class=\"material-icons\">link</i></a></h3>\n<p>To clarify how changes are detected and values updated, consider the following code written in plain JavaScript.</p>\n<code-example language=\"javascript\">\n<html>\n <div id=\"dataDiv\"></div>\n <button id=\"btn\">updateData</button>\n <canvas id=\"canvas\"></canvas>\n <script>\n let value = 'initialValue';\n // initial rendering\n detectChange();\n\n function renderHTML() {\n document.getElementById('dataDiv').innerText = value;\n }\n\n function detectChange() {\n const currentValue = document.getElementById('dataDiv').innerText;\n if (c
|
||
|
|
}
|