5 lines
21 KiB
JSON
5 lines
21 KiB
JSON
|
{
|
||
|
|
"id": "guide/observables",
|
||
|
|
"title": "Using observables to pass values",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/observables.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=\"using-observables-to-pass-values\">Using observables to pass values<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/observables#using-observables-to-pass-values\"><i class=\"material-icons\">link</i></a></h1>\n<p>Observables provide support for passing messages between parts of your application.\nThey are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values.</p>\n<p>The observer pattern is a software design pattern in which an object, called the <em>subject</em>, maintains a list of its dependents, called <em>observers</em>, and notifies them automatically of state changes.\nThis pattern is similar (but not identical) to the <a href=\"https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern\">publish/subscribe</a> design pattern.</p>\n<p>Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it.\nThe subscribed consumer then receives notifications until the function completes, or until they unsubscribe.</p>\n<p>An observable can deliver multiple values of any type—literals, messages, or events, depending on the context. The API for receiving values is the same whether the values are delivered synchronously or asynchronously. Because setup and teardown logic are both handled by the observable, your application code only needs to worry about subscribing to consume values, and when done, unsubscribing. Whether the stream was keystrokes, an HTTP response, or an interval timer, the interface for listening to values and stopping listening is the same.</p>\n<p>Because of these advantages, observables are used extensively within Angular, and for app development as well.</p>\n<h2 id=\"basic-usage-and-terms\">Basic usage and terms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/observables#basic-usage-and-terms\"><i class=\"material-icons\">link</i></a></h2>\n<p>As a publisher, you create an <code>Observable</code> instance that defines a <em>subscriber</em> function. This is the function that is executed when a consumer calls the <code>subscribe()</code> method. The subscriber function defines how to obtain or generate values or messages to be published.</p>\n<p>To execute the observable you have created and begin receiving notifications, you call its <code>subscribe()</code> method, passing an <em>observer</em>. This is a JavaScript object that defines the handlers for the notifications you receive. The <code>subscribe()</code> call returns a <code>Subscription</code> object that has an <code>unsubscribe()</code> method, which you call to stop receiving notifications.</p>\n<p>Here's an example that demonstrates the basic usage model by showing how an observable could be used to provide geolocation updates.</p>\n<code-example class=\"no-auto-link\" path=\"observables/src/geolocation.ts\" header=\"Observe geolocation updates\">\n\n// Create an Observable that will start listening to geolocation updates\n// when a consumer subscribes.\nconst locations = new Observable((observer) => {\n let watchId: number;\n\n // Simple geolocation API check provides values to publish\n if ('geolocation' in navigator) {\n watchId = navigator.geolocation.watchPosition((position: Position) => {\n observer.next(position);\n }, (error: PositionError) => {\n observer.error(error);\n });\n } else {\n observer.error('Geolocation not available');\n }\n\n // When the consumer unsubscribes, clean up data ready for next subscription.\n return {\n unsubscribe() {\n navigator.geolocation.clearWatch(watchId);\n }\n }
|
||
|
|
}
|