feat(router): emit activate/deactivate events when an outlet gets attached/detached

[dimakuba]

Previously there was no way to subscribe for attach/detach events from the RouterOutlet when an outlet got attached/detached with RouteReuseStrategy. The changes add new outputs attached/detached for the RouterOutlet to emit events when an outlet gets attached/detached.

[atscott]

This changes the meaning of the activate and deactivate events. The attach and detach are similar but not exactly the same. Especially when comparing detach with deactivate, the deactivate emits after the component is destroyed.

In fact, this behavior is specifically documented by the activate and deactivate events.

A router outlet emits an activate event when a new component is instantiated,
and a deactivate event when a component is destroyed.

This change is contrary to the documented behavior. Please open a feature request for new events attached and detached rather than changing the meaning of the current activate and deactivate events.

[dimakuba]

This changes the meaning of the activate and deactivate events. The attach and detach are similar but not exactly the same. Especially when comparing detach with deactivate, the deactivate emits after the component is destroyed.

In fact, this behavior is specifically documented by the activate and deactivate events.

A router outlet emits an activate event when a new component is instantiated,
and a deactivate event when a component is destroyed.

This change is contrary to the documented behavior. Please open a feature request for new events attached and detached rather than changing the meaning of the current activate and deactivate events.

Thanks! Good point, by creating new outputs we avoid also potential breaking changes.

[atscott]

Just a note that it would be nice to mention a use-case for this feature either in the commit message or a resolved issue.

Edit: For example, another option in #43251 would be to use the outlet context's onAttached event rather than the Router's events

  onNavBackToCachedComponent(outletName: string) {
    const context = this.contexts.getContext(outletName);
    context.outlet.attachedEvents.pipe(take(1)).subscribe(() => {
      // Do something
    });

[atscott]

reviewed-for: public-api

[atscott]

presubmit

[jessicajaniuk]

LGTM 🍪

reviewed-for: public-api

[IgorMinar]

LGTM for api changes! Thank you, @dimakuba. This is a nice addition.

Reviewed-for: public-api

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}