lifecycle of a base component with child components

Question

I have a BaseComponent. on each child navigation BaseComponent constructor and onInit are called.

export class BaseCoponent implements OnInit {

    contstructor(...){
        console.log("constructor BaseComponent");
    }

    ngOnInint(): void {
        console.log("ngOnInit BaseComponent");
    }
}

routing for Base

const routes = Routes = [
    {
        path: '',
        component: BaseComponent
        children: [
                  {
                      path: '',
                      component: Child1Component
                  },
                  {
                      path: 'child2',
                      component: Child2Component
                   }
        ]
     }
]

export const routing = RouterModule.forChild(routes);

Child1Component

export class Child1Component {

    onAction(){
        this.router.navigate(['/base/child2']);
    }
}

On Navigating both the constructor log and the onInit of BaseComponent are called. I'm attaching the BaseModule and app routing at the end of the question

few questions

1. Is it a normal behavior? for what i understand BaseComponent should be a Singleton and live for as long as not navigating away from the base (using forRoot).
2. If this is the "correct" behavior can i control it in some manner such as BaseComponent will be a Singleton?
3. Are also the children singletons? navigating away from Child1Component and then back to Child1Component should create a new instance or return the same instance? Can i control the behavior in some matter?

app.route

const appRoutes: Routes = [
    {
       path: 'base'
       loadChildren: 'app/base-module#BaseModule,
       canActivate: [AuthGuard]
    }...
}

export const appRoutingProviders: any[] = [
    authProviders
];

export const routing = RouterModule.forRoot(appRoutes);

base-module

@NgModule({
    imports: [
        CommonModule,
        routing,
        FormsModule
    ],
    declarations: [
        BaseComponent,
        Child1Component,
        Child2Component
    ],...
})

p.s

I've played a little with the Plunker routing demo of angular and indeed CrisisComponent is being created on each navigation

Answer 1

See Angular 2 Component Constructor Vs OnInit about the difference of the constructor() and ngOnInit()

The constructor is a TypeScript construct and is called by new SomeClass() (done by Angulars dependency injector behind the scenes).
ngOnInit() is a lifecycle method. ngOnChanges() is also a lifecycle hook that is called every time an @Input() is updated by Angulars change detection. ngOnChanges() is called once after ngOnChanges() was called the first time.

I don't know TS too well but normally when you new a class, the constructor of the subclass is called and when it contains super() the constructor of the superclass is called. If there is no constructor in the subclass I assume the constructor of the superclass is called instead (or does your subclass also have a constructor?).

1. I don't think "singleton" is the correct name here.
   Currently if the route doesn't change but only the route parameters of the same route, then Angular keeps the same instance. If you navigate to a different route with the same component, this doesn't apply and Angular treats it like a different component.

   1. There are plans to make this more configurable but I wouldn't expect this to land before 2.0 release.

   2. currently this doesn't work properly with lazy-loaded modules where the component gets re-created event when only route parameters change. This should be fixed already in master and be included in RC.6.

2. This is planned but currently not supported.

3. As mentioned, this is not about singletons. This is just about the router reusing the previously created component instance or destroying it and creating a new one. If the parent component is reused, also the child components are re-used (again only when the route stays the same and only route parameters change)