AsyncPipe — Angular | Spec-Zone.ru

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

Использование канала

{{ value_expression | async }}

API

class AsyncPipe implements OnDestroy ,PipeTransform {
  constructor(ref: ChangeDetectorRef): AsyncPipe;
  transform<T>(obj: any): T | null;
  transform<T>(obj: null | undefined): null;
  transform<T>(obj: any): T | null;
}

constructor

AsyncPipe

@paramrefChangeDetectorRef

@returnsAsyncPipe

ngOnDestroy

void

@returnsvoid

transform

3 перегрузки

@paramobjany

@returnsT | null

@paramobjnull | undefined

@returnsnull

@paramobjany

@returnsT | null

Описание

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

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

Экспортировано из

CommonModule

Примечания по использованию

Примеры

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

@Component({
  selector: 'async-promise-pipe',
  imports: [AsyncPipe],
  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 = null;
  arrived: boolean = false;

  private resolve: Function | null = 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',
  imports: [AsyncPipe],
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>',
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}