Що таке Async pipe?

AngularMiddle~1 хв читання

Чудове питання - це одне з найчастіших запитань про Angular.

Коротко (як на співбесіді)

Async pipe - це Angular pipe, який підписується на Observable або Promise у шаблоні й автоматично відписується під час знищення компонента.

Він також оновлює шаблон при нових значеннях.

async pipe дає змогу не писати subscribe вручну.

Приклад:

html

<div>{{ user$ | async }}</div>

Angular:

Те, що довелося б писати:

user?: User;

ngOnInit() {
  this.user$.subscribe(u => this.user = u);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

async pipe робить це автоматично.

Дуже типовий Angular-патерн:

html

<div *ngIf="user$ | async as user">
  {{ user.name }}
</div>

Це:

Він працює з:

Наприклад:

html

<div>{{ promise | async }}</div>

На співбесіді важливо сказати:

Дуже часто запитують:

Async pipe vs subscribe?

Відповідь:

async pipe кращий для UI-даних, тому що:

subscribe використовують, коли потрібна side-effect логіка.

Чи працює async pipe з BehaviorSubject?

Так, тому що він працює з будь-яким Observable.

Дуже типовий патерн:

users$ = this.http.get<User[]>('/api/users');

Template:

html

<li *ngFor="let user of users$ | async">
  {{ user.name }}
</li>

Це вважається "чистим Angular-підходом".

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.