AsyncPipe

Stable Pipe

Что он делает

Распаковывает значение из асинхронного примитива.

Как использовать

observable_or_promise_expression | async

NgModule

CommonModule

Описание

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

Примеры

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

@Component({
  selector: 'async-promise-pipe',
  template: `<div>
    <code>promise|async</code>: 
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ greeting | async }}</span>
  </div>`
})
export class AsyncPromisePipeComponent {
  greeting: Promise<string> = null;
  arrived: boolean = false;

  private resolve: Function = null;

  constructor() { this.reset(); }

  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }

  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve('hi there!');
      this.arrived = true;
    }
  }
}

Также можно использовать async с Observable. В приведенном ниже примере Observable time привязывается к представлению. Observable постоянно обновляет представление текущим временем.

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

экспортировано из @angular/common/index, определено в @angular/common/src/pipes/async_pipe.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html