Angular Observables обеспечивают поддержку передачи сообщений между издателями (создателем Observables) и подписчиками (User of Observables) в вашем приложении. Наблюдаемые объекты декларативны, то есть вы определяете функцию для публикации значений, но она не выполняется до тех пор, пока на нее не подпишется потребитель. Мы уже рассмотрели Учебное пособие по Angular 9 в этом блоге.
Наблюдаемое может доставлять несколько значений любого типа, таких как литералы, сообщения или события, в зависимости от контекста. Как издатель, вы можете создать экземпляр Observable, который определяет функцию подписчика . Это функция, которая выполняется, когда потребитель вызывает метод subscribe ().
- Define Angular Observers
- Подписка на Angular Observables
- of (… items)
- Создание угловых наблюдаемых
- Angular 9 Observables Example
- Шаг 1. Создайте проект Angular 9
- Шаг 2. Создайте файлы службы и модели
- Шаг 3. Создайте Observable
- Шаг 4: Определите подписчика
- Шаг 5. Отображение данных
- Простой код наблюдаемых
- Обработка ошибок
- Удаление наблюдаемых
- Рекомендуемые сообщения
Define Angular Observers
Обработчик для получение наблюдаемых уведомлений реализует интерфейс Observer. Это объект, который определяет методы обратного вызова для обработки трех типов уведомлений, которые может отправлять наблюдаемое. Это следующие.
- next : обязательно. Обработчик каждого доставленного значения вызывается ноль или более раз после начала выполнения.
- error : необязательно. Обработчик уведомления об ошибке. Ошибка останавливает выполнение наблюдаемого экземпляра.
- complete : необязательно. Обработчик уведомления о завершении выполнения. Отложенные значения могут продолжать доставляться следующему обработчику после завершения выполнения.
Подписка на Angular Observables
Важное замечание: экземпляр Observables начинает публиковать значения только тогда, когда кто-то на него подписывается. Вы можете подписаться на наблюдаемые объекты, вызвав метод subscribe () экземпляра и передав объект-наблюдатель для получения уведомлений.
myObservable.subscribe (x => console.log ('Наблюдатель получил следующее значение:' + x), err => console.error ('Наблюдатель получил ошибку:' + err), () => console. log ('Observer получил полное уведомление'));
Если нам нужно показать, как работает подписка, нам нужно создать новый наблюдаемый. Существует конструктор, который вы используете для создания новых экземпляров, но для иллюстрации мы можем использовать методы из библиотеки RxJS, которые создают простые наблюдаемые часто используемые типы:
of (… items)
Возвращает экземпляр Observable, который синхронно доставляет значения, предоставленные в качестве аргументов.
Преобразует свой аргумент в экземпляр Observable. Этот метод обычно используется для преобразования массива в наблюдаемое.
Создание угловых наблюдаемых
Используйте конструктор Observables для создания наблюдаемый поток любого типа. В нашем примере мы разработаем Stream типа Array.. Конструктор принимает аргумент, который функция подписчика запускает при выполнении метода subscribe () наблюдаемого объекта.
Функция подписчика получает объект Observer и может публиковать значения в методе next () наблюдателя.
Вы можете создать новый наблюдаемый объект следующим образом.
const obs = new Observable ();
Вы узнаете, как мы можем использовать Observable в Реальная жизнь по приведенному ниже примеру Angular Observables.
Angular 9 Observables Example
Мы начинаем Angular Observables с изучения примера. Итак, давайте установим проект Angular 9 с помощью Angular CLI.
Шаг 1. Создайте проект Angular 9
Введите следующее команда для создания проекта Angular с использованием Angular CLI.
ng new Observation
Теперь войдите в проект и откройте проект в VSCode или любом другом редакторе.
cd наблюдения && code.
Также установите Bootstrap CSS Framework.
npm install bootstrap --save
Шаг 2. Создайте файлы службы и модели
Создайте сервис Angular.
ng gs student --spec = false
Он создаст файл student.service.ts внутри папки src >> app .
Мы создали службу, потому что мы будем использовать эту службу для обработки данные, которые должны отображаться во внешнем интерфейсе.
Кроме того, создайте новый файл в каталоге src >> app с именем studen t.model.ts и добавьте в него следующий код.
//student.model.tsexport class Student {id: Number; имя: Строка; EnrollmentNumber: Number; Колледж: Струнный; University: String;}
Это означает, что мы определили тип Student в нашем приложении, который имеет идентификатор, имя, номер регистрации, колледж и University properties
Теперь нам нужно добавить демонстрационные данные в student.service.ts файл. Данные представляют собой тип модели Student, который мы определили выше.
//student.service.tsimport {Injectable} from '@ angular/core'; import {Student} from './student .model '; @ Injectable ({providedIn:' root '}) экспортный класс StudentService {студенты: Студент [] = [{id: 1, имя:' Krunal ', регистрационный номер: 110470116021, колледж:' VVP Engineering College ', университет : 'GTU'}, {id: 2, name: 'Rushabh', регистрационный номер: 110470116023, колледж: 'VVP Engineering College', университет: 'GTU'}, {id: 3, name: 'Ankit', регистрационный номер: 110470116022 , колледж: 'Инженерный колледж ВВП', вуз: 'ГТУ'}]; constructor () {}}
Шаг 3. Создайте Observable
Теперь мы определили частные данные. Нам нужно создать одну функцию внутри службы, которая будет возвращать эти данные в виде наблюдаемого. Таким образом, мы можем подписаться на него, получить данные и отобразить их во внешнем интерфейсе. Добавьте следующий код в student.service.ts. Поместите функцию getStudents () внутри класса после конструктора.
//student.service.tsimport {Observable} from 'rxjs'; public getStudents (): любой {const studentObservable = новый наблюдаемый (наблюдатель => {setTimeout (() => {наблюдатель.next (this.students);}, 1000);}); return studentObservable; }
Итак, мы сначала импортировали Observable из rxjs. Затем он определил одну функцию, которая будет возвращать наблюдаемое. Наблюдаемый объект получает один аргумент с функцией тайм-аута. Таким образом, через 1 секунду он создаст весь массив учеников, если подписчик подписывается на наблюдаемое.
Проще говоря, здесь studentObservable публикует наш первичный массив данных, который это студенты. Итак, если какой-либо сущности нужно получить значения из наблюдаемого, то сначала ей нужно подписаться на этот наблюдаемый объект, а затем studentObservable начинает публиковать значения, а затем подписчик получает значения.
Шаг 4: Определите подписчика
Мы создали издателя для наблюдаемых объектов. Теперь нам нужно создать подписчика. Поэтому напишите следующий код внутри файла app.component.ts .
//app.component.tsimport {Component, OnInit} from '@ angular/core '; импортировать {Student} из' ./student.model';import {StudentService} из './student.service'; @ Component ({selector: 'app-root', templateUrl: './app.component.html ', styleUrls: [' ./app.component.css' visible})export class AppComponent реализует OnInit {student: Student [] = []; конструктор (частный студенческий сервис: StudentService) {} ngOnInit () {const studentObservable = this.studentservice.getStudents (); studentObservable.subscribe ((studentData: Student []) => {this.students = studentData;}); }}
Здесь мы подписали наблюдаемый объект и получили данные учащихся.
Последний шаг — отобразить данные.
Шаг 5. Отображение данных
Добавьте следующий код в файл app.component.html .
{{student.name }}
{{student.enrollmentnumber}}
{{студент. College}}
{{student.university}}
Пойдите куда-нибудь
Сохраните файл и запустите сервер разработки angular.
ng serve
Перейдите на http://localhost: 4200 и посмотрите результат через 1 секунду.
Итак, мы успешно получили данные с помощью Observables.
Помните, Observables генерируют значения асинхронно. Наблюдаемые — это ленивые коллекции нескольких значений или потоков во времени. Это похоже на подписку на информационный бюллетень: если вы оставите эту подписку открытой, вы будете получать новую время от времени.
Отправитель решает, когда вы его получите, но все, что вам нужно сделать, это подождать, пока он не поступит прямо в ваш почтовый ящик.
Здесь важно понять при использовании наблюдаемых это то, что наблюдаемые нажимают. Push и pull — это два разных способа, описывающих, как производитель данных взаимодействует с потребителем данных .
Простой код наблюдаемых
import {Observable} from "rxjs/Observable"//создаем observableconst simpleObservable = new Observable ((Observable) => {//наблюдаемое выполнение Observable.next ("привет") Observable.complete ()})//подписаться на observablesimpleObservable.subscribe ()//избавиться от наблюдаемого strong> Обычный наблюдаемый объект создает новое, независимое выполнение для каждого подписанного наблюдателя.
Когда наблюдатель подписывается, наблюдаемый подключает обработчик событий и передает значения этому наблюдателю.
Когда второй наблюдатель подписывается, наблюдаемый затем подключает новый обработчик событий и передает значения этому второму наблюдателю в отдельном исполнении.
Иногда вместо запуска Независимое выполнение для каждого подписчика, вы требуете, чтобы каждая подписка получала одни и те же значения, даже если значения уже начали отправляться.
Это может быть что-то вроде наблюдаемых кликов по объекту документа.
Multicasting - это практика широковещательной рассылки в список из нескольких подписчиков за одно выполнение.
При многоадресной рассылке вы не регистрируете несколько слушателей в документе, а вместо этого повторно используете первого слушателя и отправляете значения каждому из них. подписчик.
При создании наблюдаемого вы должны решить, как вы хотите использовать этот наблюдаемый объект и хотите ли вы многоадресно передавать его значения.
Давайте посмотрим на пример, который считает от 1 до 3 с задержкой в одну секунду после каждого выданного числа.
функция sequenceSubscriber (наблюдатель) {const seq = [1, 2, 3]; let timeoutId; //Будет проходить через массив чисел, выдавая одно значение//в секунду, пока не дойдет до конца массива. функция doSequence (arr, idx) {timeoutId = setTimeout (() => {Observer.next (arr [idx]); if (idx === arr.length - 1) {Observer.complete ();} else {doSequence (arr, ++ idx);}}, 1000); } doSequence (seq, 0); //Отказ от подписки должен очистить тайм-аут для остановки выполнения return {unsubscribe () {clearTimeout (timeoutId); }};}//Создаем новый Observable, который будет доставить указанную выше последовательностьconst sequence = new Observable (sequenceSubscriber); sequence.subscribe ({next (num) {console.log (num);}, complete () {console.log ('Завершенная последовательность');}});//Журналы://(через 1 секунду): 1//(через 2 секунды): 2//(через 3 секунды): 3//(через 3 секунды): Завершенная последовательность
Следует отметить, что если вы подпишетесь дважды, будет два отдельных потока, каждый из которых будет передавать значения каждую секунду. Это выглядит примерно так:
//Subscribe запускает часы и отправляет их через 1 секундуsequence.subscribe ({next (num) {console.log ('1st subscribe:' + num); }, complete () {console.log ('1-я последовательность завершена.');}});//Через 1/2 секунды снова подписываемся. setTimeout (() => {sequence.subscribe ({next (num) { console.log ('2-я подписка:' + num);}, complete () {console.log ('2-я последовательность завершена.');}});}, 500);//Журналы://(через 1 секунду ): 1-я подписка: 1//(1,5 секунды): 2-я подписка: 1//(2 секунды): 1-я подписка: 2//(2,5 секунды): 2-я подписка: 2//(3 секунды): 1-я подписка: 3//(через 3 секунды): 1-я последовательность завершена//(через 3,5 секунды): 2-я подписка: 3//(через 3,5 секунды): 2-я последовательность завершена
Изменение наблюдаемого многоадресная рассылка может выглядеть примерно так:
function multicastSequenceSubscriber () {const seq = [1, 2, 3]; //Следим за каждым наблюдателем (по одному на каждую активную подписку) const Observers = []; //По-прежнему один timeoutId, потому что всегда будет генерироваться только один//набор значений, многоадресный для каждого подписчика let timeoutId; //Возвращаем функцию подписчика (запускается при вызове функции subscribe ()//) return (наблюдатель) => {наблюдатель.push (наблюдатель); //Когда это первая подписка, запускаем последовательность if (Observers.length === 1) {timeoutId = doSequence ({next (val) {//Итерировать через наблюдателей и уведомлять обо всех подписках Observers.forEach (obs => obs) .next (val));}, complete () {//Уведомляем все завершенные обратные вызовы Observers.slice (0) .forEach (obs => obs.complete ());}}, seq, 0); } return {unsubscribe () {//Удаляем из массива наблюдателей, чтобы он больше не уведомлял наблюдатели.splice (наблюдатели.indexOf (наблюдатель), 1); //Если слушателей больше нет, выполняем очистку if (наблюдатели. длина === 0) {clearTimeout (timeoutId); }}}; };}//Проходим по массиву чисел, выдавая одно значение//в секунду, пока не дойдем до конца массива. Function doSequence (Observer, arr, idx) {return setTimeout (() => {correver.next (arr [idx]); if (idx === arr.length - 1) {Observer.complete ();} else {doSequence (Observer, arr, ++ idx);}}, 1000);}//Создание новый Observable, который доставит указанную выше последовательностьconst multicastSequence = new Observable (multicastSequenceSubscriber ());//Subscribe запускает часы и начинает излучать через 1 секундуmulticastSequence.subscribe ({next (num) {console.log ('1st subscribe: '+ num);}, complete () {console.log (' 1-я последовательность завершена. ');}});//Через 1,5 секунды подпишитесь снова (должно «пропустить» первое значение) .setTimeout ( () => {multicastSequence.subscribe ({next (num) {console.log ('2-я подписка:' + num);}, complete () {console.log ('2-я последовательность завершена.');}}); }, 1500);//Журналы://(через 1 секунду): 1-я подписка: 1//(через 2 секунды): 1-я подписка: 2//(через 2 секунды): 2 nd subscribe: 2//(через 3 секунды): 1-я подписка: 3//(через 3 секунды): 1-я последовательность завершена//(через 3 секунды): 2-я подписка: 3//(через 3 секунды): 2-я последовательность завершена
Наблюдаемые при многоадресной рассылке требуют немного большей настройки, но они могут быть полезны для определенных приложений.
Позже мы рассмотрим инструменты, которые упрощают процесс многоадресной рассылки, позволяя вам взять любую наблюдаемую и сделать ее многоадресной.
Обработка ошибок
Observables производят значения асинхронно; поэтому блок try/catch не будет эффективно работать здесь для выявления ошибок. Итак, в смысле Observables вы можете обрабатывать ошибки, указав обратный вызов ошибки для наблюдателя.
Создание ошибки также приводит к тому, что наблюдаемый объект очищает подписки и прекращает создание значений. Наблюдаемый объект может либо генерировать значения (вызывая следующий обратный вызов), либо он может завершаться, вызывая либо полный обратный вызов, либо обратный вызов с ошибкой.
myObservable.subscribe ({next (num) {console.log ( 'Следующее число:' + число)}, error (err) {console.log ('Получено сообщение об ошибке:' + err)}});
Удаление наблюдаемых
Когда вы подписываетесь на Observable, вы получаете обратно подписку, которая представляет собой текущее выполнение. Просто вызовите unsubscribe (), чтобы отменить выполнение. Итак, вы свободны в использовании этого Observable.
Вы можете найти больше об Angular Observables здесь.
Наконец, пример Angular 9 Observables завершен.
Рекомендуемые сообщения
Пример Angular 9 Forms
Angular 9 Пример загрузки файла
Пример Angular 9 HttpClient
Пример Angular 9 CRUD
