Наблюдаемые в Angular

Angular использует наблюдаемые объекты в качестве интерфейса для обработки множества общих асинхронных операций. Например:

  • Класс EventEmitter расширяет Observable.
  • Модуль HTTP использует наблюдаемые объекты для обработки запросов и ответов AJAX.
  • Модули Router и Forms используют наблюдаемые объекты для прослушивания и ответа на события, вводимые пользователем.

Генератор событий

Angular предоставляет класс EventEmitter, который используется при публикации значений из компонента через декоратор @Output (). EventEmitter расширяет Observable, добавляя метод emit (), чтобы он мог отправлять произвольные значения. Когда вы вызываете emit (), он передает полученное значение методу next () любого подписанного наблюдателя.

Хороший пример использования можно найти в документации EventEmitter. Вот пример компонента, который прослушивает события открытия и закрытия:

     

Вот определение компонента:

Код TypeScript:

  @Component ({selector: 'zippy', template: `
Переключить
`}) класс экспорта ZippyComponent {visible = true; @Output () open = новый EventEmitter (); @Output () close = новый EventEmitter (); toggle () {this.visible =! this.visible; если (this.visible) {this.open.emit (ноль); } else {this.close.emit (ноль); }}}

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и не может иметь какой-либо вывод

См. Pen Observable_eventEmitters от w3resource (@ w3resource) на CodePen.

HTTP

HttpClient Angular возвращает наблюдаемые из вызовов методов HTTP. Например, http.get (‘/api’) возвращает наблюдаемое. Это дает несколько преимуществ по сравнению с HTTP API на основе обещаний:

Observables не изменяют ответ сервера (как это может происходить через связанные вызовы .then () для обещаний). Вместо этого вы можете использовать серию операторов для преобразования значений по мере необходимости.

HTTP-запросы можно отменять с помощью метода unsubscribe ().

Запросы можно настроить для получения обновления событий прогресса.

Неудачные запросы можно легко повторить.

Асинхронный канал

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

В следующем примере наблюдаемое время привязывается к представлению компонента. Наблюдаемое постоянно обновляет представление с текущим временем..

Код TypeScript:

  @Component ({selector: 'async-observable-pipe', template  : `
observable | async : Time: {{time | async}}
`}) класс экспорта AsyncObservablePipeComponent {time = new Observable (наблюдатель => setInterval (() => Observer.next (new Date (). toString ()), 1000));}

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. Pen Observable_asyncPipes от w3resource (@ w3resource) на CodePen.

Router.events предоставляет события в виде наблюдаемых. Вы можете использовать оператор filter () из RxJS, чтобы искать интересующие события и подписываться на них, чтобы принимать решения на основе последовательности событий в процессе навигации. Вот пример:

Код TypeScript:

  import {Router, NavigationStart} из '@ angular/ router '; import {filter} from' rxjs/operators '; @ Component ({selector:' app-routable ', templateUrl:' ./routable.component.html ', styleUrls: [' ./routable.component.css '  ]}) класс экспорта Routable1Component реализует OnInit {navStart: Observable ;  constructor (частный маршрутизатор: Router) {//Создайте новый Observable, который публикует только событие NavigationStart this.navStart = router.events.pipe (filter (evt => evt instanceof NavigationStart)) как Observable ;  } ngOnInit () {this.navStart.subscribe (evt => console.log ('Навигация началась!'));  }}  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод

См. Pen Observables_routerEvents от w3resource (@ w3resource) на CodePen.

ActivatedRoute — это внедренная служба маршрутизатора, которая использует наблюдаемые объекты чтобы получить информацию о пути и параметрах маршрута. Например, ActivateRoute.url содержит наблюдаемый объект, который сообщает путь или пути маршрута. Вот пример:

Код TypeScript:

  import {ActivatedRoute} from '@ angular/router'  ; @Component ({selector: 'app-routable', templateUrl: './routable.component.html', styleUrls: ['./routable.component.css']] })export class Routable2Component реализует OnInit {конструктор (частный активированный  : ActivatedRoute) {} ngOnInit () {this.activatedRoute.url .subscribe (url => console.log ('URL изменен на:' + url));  }}  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод

См. Pen observable_activatedRouter от w3resource (@ w3resource) на CodePen.

Реактивные формы

Реактивные формы имеют свойства, которые используют наблюдаемые для отслеживания значений элементов управления формы. Свойства valueChanges и statusChanges FormControl содержат наблюдаемые объекты, которые вызывают события изменения. Подписка на наблюдаемое свойство управления формой — это способ запуска логики приложения в классе компонента. Например:

Код TypeScript:

  import {FormGroup} from '@ angular/forms';  @Component ({selector: 'my-component', template: 'MyComponent Template'}) класс экспорта MyComponent реализует OnInit {nameChangeLog: string [] = [];  heroForm: FormGroup;  ngOnInit () {this.logNameChange ();  } logNameChange () {const nameControl = this.heroForm.get ('имя');  nameControl.valueChanges.forEach ((значение: строка) => this.nameChangeLog.push (значение));  }}  

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод

См. Pen observable_reactiveForm от w3resource (@ w3resource) на CodePen.

Observables vs Promises

И Promises, и Observables предоставляют нам абстракции, которые помогают нам справляться с асинхронной природой наших приложений. Однако между ними есть важные различия:

  • Observables могут определять аспекты установки и удаления асинхронного поведения.
  • Observables можно отменять.
  • Более того, Observables можно повторить, используя один из операторов повтора, предоставляемых API, например retry и retryWhen. С другой стороны, Promises требует, чтобы вызывающий имел доступ к исходной функции, которая вернула обещание, чтобы иметь возможность повторной попытки.

Observables предлагают гибкий набор API для создания и преобразование асинхронных потоков. Они предоставляют множество функций для создания потоков из многих других типов, а также для управления ими и их преобразования

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