儿童导航Angular2

Question

everyone. I have and issue with @angular/router. I have the routes config for my app.

Router [] = [
   {
      path: 'main',
      component: MainComponent,
      children: [
          {
             path: 'info',
             component: InfoComponent
          }
      ]
   }

And i have the next flow: i entry the page and it navigates to MainComponent, that just gain the object from DB. Inside MainComponent i use this.router.navigate(['info'], {relativeTo: this.route}) . In the InfoComponent i have componentResolver that depends on the parent from the MainComponent

export class InfoComponent extends OnInit {

    constructor (@Host() private parent: MainComponent) {}

    ...

    ngOnInit () { `componentResolver is done` }
}

The problem is, when I navigates back by the back button in the Chrome navbar, or clicking Alt+< , it shows me just empty view(MainComponent). Where is my problem and why is this happened?

Answer 1

Try this router configuration instead of doing the navigation yourself manually in the MainComponent (so remove this.router.navigate(['info'], {relativeTo: this.route}) ):

Router [] = [
   {
      path: 'main',
      component: MainComponent,
      children: [
          { 
            path: '', 
            redirectTo: 'info', 
            pathMatch: 'full' 
          },
          {
             path: 'info',
             component: InfoComponent
          }
      ]
   }