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

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

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

Источник событий

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

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

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>

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

Код TypeScript:

@Component({
  selector: 'zippy',
  template: `
  <div class="zippy">
    <div (click)="toggle()">Toggle</div>
    <div [hidden]="!visible">
      <ng-content></ng-content>
    </div>
  </div>`})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter<any>();
  @Output() close = new EventEmitter<any>();
  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

Демонстрация в реальном времени:

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

HTTP

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

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

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

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

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

Асинхронная труба

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

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

Код TypeScript:

@Component({
  selector: 'async-observable-pipe',
  template: `<div><code>observable|async</code>:
       Time: {{ time | async }}</div>`
})
export class AsyncObservablePipeComponent {
  time = new Observable(observer =>
    setInterval(() => observer.next(new Date().toString()), 1000)
  );
}

Демонстрация в реальном времени:

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

маршрутизатор

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

Код TypeScript:

import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-routable',
  templateUrl: './routable.component.html',
  styleUrls: ['./routable.component.css']
})
export class Routable1Component implements OnInit {
  navStart: Observable<NavigationStart>;
  constructor(private router: Router) {
    // Create a new Observable that publishes only the NavigationStart event
    this.navStart = router.events.pipe(
      filter(evt => evt instanceof NavigationStart)
    ) as Observable<NavigationStart>;
  }
  ngOnInit() {
    this.navStart.subscribe(evt => console.log('Navigation Started!'));
  }
}

Демонстрация в реальном времени:

См. 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 implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}
  ngOnInit() {
    this.activatedRoute.url
      .subscribe(url => console.log('The URL changed to: ' + url));
  }
}

Демонстрация в реальном времени:

См. Pen observable_activationRouter от w3resource ( @ w3resource ) в CodePen .

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

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

Код TypeScript:

import { FormGroup } from '@angular/forms';
@Component({
  selector: 'my-component',
  template: 'MyComponent Template'
})
export class MyComponent implements OnInit {
  nameChangeLog: string[] = [];
  heroForm: FormGroup;
  ngOnInit() {
    this.logNameChange();
  }
  logNameChange() {
    const nameControl = this.heroForm.get('name');
    nameControl.valueChanges.forEach(
      (value: string) => this.nameChangeLog.push(value)
    );
  }
}

Демонстрация в реальном времени:

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

Наблюдаемые против обещаний

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

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

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

Предыдущая: Библиотека RxJS
Далее: Сравнение наблюдаемых с другими методами