Как использовать AsyncPipe для подписки и автоматической отписки от Observable?

AsyncPipe — это специальный пайп в Angular, который принимает Observable или Promise и возвращает его последнее значение. Главная его ценность в том, что он берёт на себя управление подпиской: подписывается при появлении в шаблоне и автоматически отписывается, когда компонент уничтожается или сам Observable меняется. Это устраняет одну из самых частых причин утечек памяти в Angular-приложениях — забытый unsubscribe.

Как это работает

Когда Angular рендерит шаблон с {{ data$ | async }}, пайп вызывает subscribe() на переданном Observable. При каждом новом значении Angular запускает change detection и обновляет представление. Когда компонент разрушается (срабатывает ngOnDestroy), AsyncPipe вызывает unsubscribe() автоматически. Если в пайп передать новый Observable (например, через *ngIf="cond ? obsA$ : obsB$"), пайп отпишется от старого и подпишется на новый.

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

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent {
  users$ = this.http.get<User[]>('/api/users');
  constructor(private http: HttpClient) {}
}

Здесь нет ни одной ручной подписки и ни одного unsubscribe — всё делает AsyncPipe. Для нескольких использований одного Observable применяют трюк с *ngIf="users$ | async as users", чтобы не создавать несколько подписок.

Когда стоит применять

• Для отображения данных из HTTP-запросов, сторов (NgRx, Akita) и других потоков прямо в шаблоне.
• Когда нужно избежать ручного управления подписками и снизить риск утечек.
• В комбинации с shareReplay, combineLatest и другими операторами RxJS.

Не стоит использовать AsyncPipe, если значение нужно обработать в TypeScript-коде (например, для сложной логики) — тогда подписка в компоненте с takeUntil или takeUntilDestroyed будет уместнее.

Итог: AsyncPipe — самый простой и безопасный способ подписаться на Observable в шаблоне Angular, автоматически управляющий жизненным циклом подписки. Применяйте его везде, где данные можно отобразить напрямую, чтобы избежать утечек памяти и лишнего кода.