Как создать наблюдаемые в Angular 9 на примере

Angular широко использует наблюдаемые объекты в системе событий и в службе HTTP. Observable — это не особенность Angular, а новый стандарт управления асинхронными данными. Мы можем использовать Observables без Angular или с Angular.

Мы даже можем создавать Observables на платформе Node.js или внутри любой библиотеки Javascript. RxJS — известная библиотека, которая обеспечивает поддержку Observables.

Давайте посмотрим, что такое Observables в Angular и как создавать Observables в Angular.

Что такое Observables

Observable — это просто функция с минимальными отличительными характеристиками. Observables принимают «наблюдателя» (объект с методами «next», «error» и «complete») и возвращают логику отмены.

Наблюдаемые — это просто ленивые коллекции нескольких значений с течением времени. Вы можете думать о ленивых наблюдаемых как о информационных бюллетенях. Для каждого подписчика создается новый информационный бюллетень. Информационные бюллетени затем отправляются только этим людям, а не кому-либо еще.

Теперь, если вы оставите эту подписку открытой для рассылки новостей, вы будете время от времени получать новую. В этом примере отправитель решает, когда вы получите новое письмо для информационного бюллетеня, но все, что вам нужно сделать, это подождать, пока оно не поступит прямо в ваш почтовый ящик.

Observable устанавливает Observer и соединяет его с « вещью », от которой мы хотим получать значения. Эта « вещь » называется производителем и является источником значений, возможно, от события щелчка или ввода или чего-то более сложного, например, связи по HTTP.

В Angular мы обычно используем Observable, когда получаем данные с сервера. Асинхронные данные — прекрасный пример использования Observable в Angular.

Что такое наблюдатель в RxJS

Когда Observable производит значения , затем он уведомляет Observer, вызывая .next () , когда новое значение было успешно захвачено, и вызывает метод .error () при возникновении ошибки.

Когда мы подписываемся на Observable, он будет продолжать передавать любые значения наблюдателю, пока не произойдет одно из двух.

  1. Когда производитель говорит, что больше нет значений для отправки, в этом случае он вызовет .complete () в Observer. Он уведомляет подписчиков о том, что больше не осталось значений.
  2. Мы (как «потребители») решаем, не заинтересованы ли мы больше в этих значениях или нет, и отменяем подписку на эти наблюдаемые.

Когда мы хотим скомпоновать эти значения, возвращаемые из Observable, до того, как они достигнут нашего последнего блока .subscribe (), значение передается (или может быть передано) через цепочку Observable, которая обычно выполняется с помощью «операторов».

Эту цепочку мы называем наблюдаемой последовательностью.

Каждый оператор возвращает новый Observable для продолжения нашей последовательности, также известной как «поток»..

Создание наблюдаемых объектов на платформе Node.js

Observable.create () — это встроенный метод RxJS, который создает новый объект Observable. RxJS — сторонняя библиотека. Итак, нам нужно установить с помощью следующей команды.

 npm install rxjs --save 

Следующим шагом будет создание app.js внутри корневой папки и напишите следующий код.

//app.jsconst {Observable} = require ('rxjs'); const obs $ = Observable.create (function (  наблюдатель) {наблюдатель.next ('Observables on'); наблюдатель.next ('Node.js'); наблюдатель.complete ();}); obs $ .subscribe (val => console.log (val)); 

На первом этапе нам потребовался оператор Observable, а затем мы создали новый Observable с помощью метода create () , который принимает анонимную функцию.

Здесь Observer — это интерфейс для потребителя push-уведомлений, доставляемых Observable.

Объект, соответствующий интерфейсу Observer, обычно передается наблюдаемому. subscribe (Observer ), а Observable вызовет метод next (value) Observer’а для предоставления уведомлений.

Хорошо управляемый Observable вызовет метод complete () наблюдателя ровно один раз или метод ошибки (err) наблюдателя ровно один раз, как последнее доставленное уведомление.

Оператор Subscribe — это клей, который соединяет наблюдателя с Observable. Чтобы наблюдатель мог видеть элементы, отправляемые Observable, или получать сообщение об ошибке или завершенные уведомления от Observable, он должен сначала подписаться на этот Observable с помощью этого оператора.

Стандартная реализация объекта Observable. Оператор подписки может принимать от одного до трех методов (которые затем составляют наблюдателя) или может принимать объект (иногда называемый наблюдателем или подписчиком), реализующий интерфейс.

Теперь запустите указанный выше файл. используя следующую команду.

Output

 ➜ es git: (master) ✗ node appObservables onNode.js 

Создание наблюдаемых в Angular

Angular имеет встроенную поддержку rxjs и автоматически устанавливает библиотеку rxjs при установке нового проекта Angular.

Мы можем импортировать rxjs в файл компонента Angular, используя следующий код.

 import {Observable} from 'rxjs'; 

Хорошо, напишем следующий код внутри app.component.ts rong> файл.

//app.component.tsimport {Component, OnInit} from '@ angular/core'; import {Observable} from 'rxjs'; @ Component ({selector: 'app  -root ', templateUrl:' ./app.component.html ', styleUrls: [' ./app.component.css'ght})export class AppComponent реализует OnInit {ngOnInit () {const simpleObservable $: Observable  =  new Observable ((Observer) => {//наблюдаемое выполнение Observver.next ('Добро пожаловать');  Observer.next ('Угловой 9');  Observer.complete ();  });  simpleObservable $. подписаться (val => console.log (val));  }} 

Здесь мы использовали метод жизненного цикла ngOnInit ().

В основном мы используем ngOnInit для всей инициализации/объявления и избегаем работы в конструкторе . Конструктор должен использоваться только для инициализации членов класса, но не должен выполнять фактическую «работу».

Итак, вам следует использовать конструктор () для настройки внедрения зависимостей , а не ничего другого.

В TypeScript мы можем создать новый Observable с помощью ключевого слова new и принять Observer в качестве параметра.

Затем Observable создал производителя, который генерирует значения, которые могут меняться со временем.

Чтобы получить значения из этого Observable, нам нужно подписаться на этот наблюдаемый объект с помощью оператора подписки, и мы наконец получим эти значения.

Наш файл app.component.html выглядит так, как показано ниже.

 

Как создавать новые Observables в Angular 9

Сохраните файл и запустите сервер разработки, используя следующую команду.

 ng serve -o 

Откройте панель консоли браузера, чтобы увидеть значения Observables.

В консоли мы видим, что мы успешно создали Observable, и подписываемся на него, чтобы получать значения.

Итак, вот как вам нужно создать Observables в Angular и подписаться на него.

См. также

Учебное пособие по Angular 9

Привязка свойств Angular 9

Привязка событий Angular 9

Оцените статью
nanomode.ru
Добавить комментарий