How to re-instantiate/destory a component in Angular-6

Question

1. Can you check the existence of an instance of a component from the component itself ?

2. Can you destroy existing instance and create a new instance ?

I seem to have a problem with one of my components. When visited multiple times consecutively with different params component's ngAfterViewInit fires only first time (i assume when the component was instantaited). Subsequent visits doesnt cause to fire ngAfterViewInit, ie, looks as if it is reusing the same component instance or something... however, I can identify the params and do the needful with the changed params..

However, If I visit a new route and come back to the route/compoent in question it works normal. and I can see it is getting destroyed before the new route and corresponding component initiated.

My objective is to re-instatiate the component EVERY TIME I vist the route.

So

1. Can you check the existence of an instance of a component from the component itself ?

2. Can you destroy existing instance from code and create a new instance ?

Or is there any other way to tackle this issue.

My setup

Lazy loaded module -> mdm

const routes: Routes = [

  {
    path: '',
    component: HomeComponent,

    children : [
                  { path: ':id' , component : AComponent }
    ]
  }

Menu AnchorLinks

1. mdm/1000
2. mdm/2000 etc etc

Answer 1

There's definitely another way of doing that.

To answer you, you can probably check the existence of a component instance, and you can probably re-create it on demand.

But you should not.

Not only this is overkill, but you also should let Angular manage the injectors, otherwise (if you don't know what you're doing), you'll encounter some funny issues.

To explain it briefly to you : reloading a route doesn't trigger the lifecycle of a component. A component's lifecycle starts when he is instantiated, and ends when he is destroyed (which means "not in the DOM anymore").

When you reload a route, the component doesn't get destroyed, hence your issue.

To resolve that, subscribe to route change events in your lifecycle hook :

ngAfterViewInit() {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(event => /* do something */);
}

I have piped the observable to only listen to the last event of the stack (otherwise, your subscription will be ran a lot of times).