5 lines
43 KiB
JSON
5 lines
43 KiB
JSON
|
{
|
||
|
|
"id": "guide/lifecycle-hooks",
|
||
|
|
"title": "Lifecycle hooks",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/lifecycle-hooks.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=\"lifecycle-hooks\">Lifecycle hooks<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lifecycle-hooks#lifecycle-hooks\"><i class=\"material-icons\">link</i></a></h1>\n<p>A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views.\nThe lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed.\nThe lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM.\nDirectives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.</p>\n<p>Your application can use <a href=\"guide/glossary#lifecycle-hook\" title=\"Definition of lifecycle hook\">lifecycle hook methods</a> to tap into key events in the lifecycle of a component or directive in order to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lifecycle-hooks#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before working with lifecycle hooks, you should have a basic understanding of the following:</p>\n<ul>\n<li><a href=\"https://www.typescriptlang.org/\">TypeScript programming</a>.</li>\n<li>Angular app-design fundamentals, as described in <a href=\"guide/architecture\" title=\"Introduction to fundamental app-design concepts\">Angular Concepts</a>.</li>\n</ul>\n<a id=\"hooks-overview\"></a>\n<h2 id=\"responding-to-lifecycle-events\">Responding to lifecycle events<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lifecycle-hooks#responding-to-lifecycle-events\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can respond to events in the lifecycle of a component or directive by implementing one or more of the <em>lifecycle hook</em> interfaces in the Angular <code>core</code> library.\nThe hooks give you the opportunity to act on a component or directive instance at the appropriate moment, as Angular creates, updates, or destroys that instance.</p>\n<p>Each interface defines the prototype for a single hook method, whose name is the interface name prefixed with <code>ng</code>.\nFor example, the <code><a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a></code> interface has a hook method named <code>ngOnInit()</code>. If you implement this method in your component or directive class, Angular calls it shortly after checking the input properties for that component or directive for the first time.</p>\n<code-example path=\"lifecycle-hooks/src/app/peek-a-boo.directive.ts\" region=\"ngOnInit\" header=\"peek-a-boo.directive.ts (excerpt)\">\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()\nexport class PeekABooDirective implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n constructor(private logger: LoggerService) { }\n\n // implement <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a>'s `ngOnInit` method\n ngOnInit() {\n this.logIt(`<a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a>`);\n }\n\n logIt(msg: string) {\n this.logger.log(`#${nextId++} ${msg}`);\n }\n}\n\n</code-example>\n<p>You don't have to implement all (or any) of the lifecycle hooks, just the ones you need.</p>\n<a id=\"hooks-purpose-timing\"></a>\n<h3 id=\"lifecycle-event-sequence\">Lifecycle event sequence<a title=\"Link to this heading\" cl
|
||
|
|
}
|