title: lifecycle of a base component with child components
body: <p>I have a <code>BaseComponent</code>. on each child navigation <code>BaseComponent</code> <code>constructor</code> and <code>onInit</code> are <strong>called</strong>.</p>
  
  <pre><code>export class BaseCoponent implements OnInit {
  
      contstructor(...){
          console.log("constructor BaseComponent");
      }
  
      ngOnInint(): void {
          console.log("ngOnInit BaseComponent");
      }
  }
  </code></pre>
  
  <p><strong>routing for Base</strong></p>
  
  <pre><code>const routes = Routes = [
      {
          path: '',
          component: BaseComponent
          children: [
                    {
                        path: '',
                        component: Child1Component
                    },
                    {
                        path: 'child2',
                        component: Child2Component
                     }
          ]
       }
  ]
  
  export const routing = RouterModule.forChild(routes);
  </code></pre>
  
  <p><strong>Child1Component</strong></p>
  
  <pre><code>export class Child1Component {
  
      onAction(){
          this.router.navigate(['/base/child2']);
      }
  }
  </code></pre>
  
  <p><em>On Navigating</em> both the <code>constructor</code> log and the <code>onInit</code> of <code>BaseComponent</code> are called. I'm attaching the <code>BaseModule</code> and <code>app routing</code> at the end of the question</p>
  
  <p><strong>few questions</strong></p>
  
  <ol>
  <li>Is it a normal behavior? for what i understand <code>BaseComponent</code> should be a <code>Singleton</code> and live for as long as not navigating away from the base (using <code>forRoot</code>). </li>
  <li>If this is the "correct" behavior can i control it in some manner such as <code>BaseComponent</code> will be a Singleton?</li>
  <li>Are also the children <code>singletons</code>? navigating away from <code>Child1Component</code> and then back to <code>Child1Component</code> should create a new instance or return the same instance? Can i control the behavior in some matter?  </li>
  </ol>
  
  <p><strong>app.route</strong></p>
  
  <pre><code>const appRoutes: Routes = [
      {
         path: 'base'
         loadChildren: 'app/base-module#BaseModule,
         canActivate: [AuthGuard]
      }...
  }
  
  export const appRoutingProviders: any[] = [
      authProviders
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>base-module</strong></p>
  
  <pre><code>@NgModule({
      imports: [
          CommonModule,
          routing,
          FormsModule
      ],
      declarations: [
          BaseComponent,
          Child1Component,
          Child2Component
      ],...
  })
  </code></pre>
  
  <p><strong>p.s</strong></p>
  
  <p>I've played a little with the <a href="http://plnkr.co/edit/?p=preview" rel="nofollow">Plunker routing demo of angular</a> and indeed <code>CrisisComponent</code> is being created on each navigation</p>