Наводим порядок в загрузке данных Angular с помощью резолверов

[radtie]

Честно говоря, на момент публикации советы не то чтобы актуальные, и отражают не самый лучший стиль разработки современных angular-приложений.

1. Классы-резолверы считается устаревшим и данные можно вязать сразу на инпуты, минуя работу с маршрутами в компоненте:

{
  path: 'home',
  loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent),
  resolve: {
    user: () => inject(ApiService).getUser(),
    posts: () => inject(ApiService).getPosts()
  }
}

export class HomeComponent {
  @Input() user: User;

  posts = input<Post[]>();
}

2 Вынося за скобки саму идею использования глобального лоадера, в его реализации есть несколько спорных моментов:

• логика лоадера захламряет AppComponent

• отписка и "утечка памяти"

  • AppComponent существует весь жизненный цикл типичного приложения и его ngOnDestroy ни разу не сработает

  • Даже если перестраховаться, нам не нужно подписываться/отписываться, есть же takeUntilDestroyed

  • Сама концепция subscribe -> update property -> unsubscribe в данном случае не самая изящная

function setupIsLoading() {
  return inject(Router).events.pipe(
    filter((e) => e instanceof ResolveStart || e instanceof ResolveEnd),
    map((e) => e instanceof ResolveStart)
  );
}

@Component({
  selector: 'app-root',
  template: `
    @if (isLoading$ | async) {
      Загрузка
    }
    <!-- или даже как сигнал -->
    @if (isLoading()) {
      Загрузка
    }
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  protected readonly isLoading$ = setupIsLoading();

  protected readonly isLoading = toSignal(this.isLoading$);
}

[AlekseyVY]

@radtie, спасибо за подробный и полезный комментарий! Очень признателен за конкретный отзыв. 

Вы совершенно правы, это важные замечания. Функциональные резолверы (в v14) и прямой байдинг на инпуты (из v16) заметно упрощают код в Angular. 

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

Полностью согласен с вами и по поводу лоадера. Ваш способ с отдельной функцией и toSignal чище, реактивнее и лучше. Спасибо за замечание про ngOnDestroy в AppComponent - об этом часто забывают. Еще раз спасибо! Ваш комментарий отлично дополняет статью.