Современный Angular: Заменяем жизненные циклы на сигналы

Вот важная новость с фронта ИИ: PML только что Современный Angular: Заменяем жизненные циклы на сигналы Средний 3 мин 0 JavaScript * TypeScript * Angular * Программирование * Веб-разработка * Если вы пишете на Angular, то наверняка часто используете хуки жизненного цикла вроде ngOnChanges, ngOnInit и ngOnDestroy. С появлением сигналов и концепции Zoneless (когда Zone. js уже не обязателен) у нас появились более элегантные и читаемые альтернативы.

Давайте разберем, как современный подход позволяет упростить код и избавиться от "шумных" методов жизненного цикла. Вместо ngOnChanges — computed()Было: классический подход с ngOnChanges @Component({... }) export class PricingComponent implements OnChanges { @Input() price = 0; totalPrice = 0; constructor(private taxService: TaxService) {} ngOnChanges(changes: SimpleChanges) { if (changes) { // При обновлении инпута дергаем сервис this.

Технические детали

price); } } }Стало: реактивно с сигналами @Component({... }) export class Плюсы: короче, читабельно, более производительно (вычисляется только когда реально нужно). Отказываемся от ngOnInit в пользу декларативной инициализации ngOnInit часто использовали как "безопасную" точку, где входные параметры уже гарантированно доступны.

С сигналами мы можем инициализировать данные прямо на уровне свойств, реактивно. Было: инициализация в ngOnInit @Component({... }) export class UserComponent implements OnInit { @Input() userId!

: User; constructor(private userService: UserService) {} ngOnInit() { // Ждем, пока Angular установит userId this. userId); } }Стало: сигнальный подход @Component({... }) export class Дополнительный бонус: теперь при изменении userId (если такое возможно) данные обновятся автоматически — без лишних телодвижений.

Отраслевые последствия

Убиваем ngOnDestroy с помощью takeUntilDestroyed()Больше не нужно вручную хранить массивы подписок (Subscription) и отписываться в ngOnDestroy. Спасибо оператору takeUntilDestroyed(). Было: ручное управление подпиской @Component({...

}) export class AlertComponent implements OnDestroy { private sub: Subscription; constructor(private alertService: AlertService) { this. subscribe(alert => console. log(alert)); } ngOnDestroy() { this.

unsubscribe(); } }Стало: автоматическая отписка через pipe @Component({... }) export class AlertComponent { constructor(private alertService: AlertService) { this. pipe(takeUntilDestroyed()) // Angular сам отпишет при уничтожении компонента .

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.