5 lines
11 KiB
JSON
5 lines
11 KiB
JSON
|
{
|
|||
|
|
"id": "guide/observables-in-angular",
|
|||
|
|
"title": "Observables in Angular",
|
|||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/observables-in-angular.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=\"observables-in-angular\">Observables in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/observables-in-angular#observables-in-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:</p>\n<ul>\n<li>You can define <a href=\"guide/event-binding#custom-events-with-eventemitter\">custom events</a> that send observable output data from a child to a parent component.</li>\n<li>The HTTP module uses observables to handle AJAX requests and responses.</li>\n<li>The Router and Forms modules use observables to listen for and respond to user-input events.</li>\n</ul>\n<h2 id=\"transmitting-data-between-components\">Transmitting data between components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/observables-in-angular#transmitting-data-between-components\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular provides an <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code> class that is used when publishing values from a component through the <a href=\"guide/inputs-outputs#output\"><code>@Output()</code> decorator</a>.\n<code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code> extends <a href=\"https://rxjs.dev/api/index/class/Subject\">RxJS <code>Subject</code></a>, adding an <code>emit()</code> method so it can send arbitrary values.\nWhen you call <code>emit()</code>, it passes the emitted value to the <code>next()</code> method of any subscribed observer.</p>\n<p>A good example of usage can be found in the <a href=\"api/core/EventEmitter\">EventEmitter</a> documentation. Here is the example component that listens for open and close events:</p>\n<p><code><app-zippy (open)=\"onOpen($event)\" (close)=\"onClose($event)\"></app-zippy></code></p>\n<p>Here is the component definition:</p>\n<code-example path=\"observables-in-angular/src/main.ts\" header=\"EventEmitter\" region=\"eventemitter\">\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-zippy',\n template: `\n <div class=\"zippy\">\n <div (click)=\"toggle()\">Toggle</div>\n <div [hidden]=\"!visible\">\n <ng-content></ng-content>\n </div>\n </div>\n `,\n})\nexport class ZippyComponent {\n visible = true;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() open = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><any>();\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() close = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><any>();\n\n toggle() {\n this.visible = !this.visible;\n if (this.visible) {\n this.open.emit(null);\n } else {\n this.close.emit(null);\n }\n }\n}\n\n\n</code-example>\n<h2 id=\"http\">HTTP<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/observables-in-angular#http\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular’s <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> returns observables from HTTP method calls. For instance, <code>http.get(‘/api’)</code> returns an observable. This provides several advantages over promise-based HTTP APIs:</p>\n<ul>\n<li>Observables do not mutate the server response (as can occur through chained <code>.then()</code> calls on promises). Instead, you can use a series of operators to transform values as needed.</li>\n<li>HTTP requests are cancellable
|
|||
|
|
}
|