События RouterOutlet в Angular

Angular обеспечиваниет разработчикам мощный механизм для управления маршрутизацией в приложении при помощи Angular Router. Один из ключевых элементов этого механизма - это RouterOutlet, который служит контейнером для загрузки компонентов при переходе по маршрутам.

Однако RouterOutlet предоставляет не только возможность отображения компонентов, но и ряд событий, которые позволяют нам реагировать на различные этапы жизненного цикла маршрутизации.

События RouterOutlet

1. activate: событие вызывается, когда компонент успешно активирован в RouterOutlet. Это происходит после того, как компонент успешно создан и добавлен в дерево компонентов.

2. deactivate: событие вызывается перед деактивацией компонента в RouterOutlet. Это предоставляет возможность выполнить очистку или сохранение состояния компонента перед его удалением.

Обработка событий может быть осуществлена как в компоненте, так и в шаблоне.

Обработка событий в шаблоне

<router-outlet 
  (activate)="onActivate($event)" 
  (deactivate)="onDeactivate($event)">
</router-outlet>

Обработка событий в компоненте

import { RouterOutlet } from '@angular/router';

@Component({...})
export class AppComponent {
  constructor(private routerOutlet: RouterOutlet) {
    routerOutlet.activateEvents.subscribe((component) => {
      console.log('Component activated:', component);
    });

    routerOutlet.deactivateEvents.subscribe((component) => {
      console.log('Component deactivated:', component);
    });
  }
}