Introduce ngOnAttach/ngOnDetach lifecycle hooks #25521

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

The Problem

Currently, when components are detached/attached using a custom RouteReuseStrategy there is no easy API to execute logic when the component has been detached/reattached. The most common case is that you want to re-fetch/refresh data whenever the component has beed re-attached. Usually, the ngOnInit hook is used for that, but since the component is reused - it is not fired. Also, you might want to unsubscribe from observables on detaching, but you cannot do that on ngOnDestroy as it is not fired.

Here is simple stackblitz example, where we want to be able to start/stop a timer only when a component is attached.

Note: NativeScript Angular apps use a custom RouteReuseStrategy by default, which integrates with the native mobile navigation stack (this is used to cache native components). This can cause a confusion between a default Web Angular app and a default NativeScript Angular app.

Proposed Solution

Introduce two new lifecycle hooks - ngOnAttach/ngOnDetach. They will be fired whenever the component has been attached or detached to the component tree. The main difference with ngOnInit/ngOnDestroy is that the attach/detach hooks can be called multiple times in the lifetime of a component.

The new lifecycle hooks should be fired recursively for child components that are being attached and detached with their parent too.

Here is a state diagram of components, along with the events fired when switching between states.

ctor()   ┌─────────────┐  ngOnInit() ┌──────────┐ ngOnDestroy() ┌───────────┐
───────> │ constructed │ ──────────> │ detached │ ────────────> │ destroyed │
         └─────────────┘             └──────────┘               └───────────┘
                                         │ ∧
                            ngOnAttach() │ │ ngOnDetach()
                                         ∨ │
                                     ┌──────────┐
                                     │ attached │
                                     └──────────┘          

In the above stakplitz example you would be able to use the ngOnAttach()/ngOnDetach() hooks to subscribe and unsubscribe. In fact in apps that do not utilize a custom RouteReuseStrategy, these events would be equivalent to ngOnInit()/ngOnDestroy(). So these will be a good alternative to use when you have projects that share code base between web and mobile (using NativeScript).