Angular 2 routing issue in child pages

Question

I am new angular 2 development. I added one component ,Inside this component i have some other child component. My folder structure in following ways:

parentComponent
    -child1Component
    -child2Component
    -child3Component

in parentComponent.html i added <router-outlet></router-outlet>

I have navigation from child1 to child 2,and child 2 to child3. Also i can move to back in vice versa. Moving back i am using this._location.back();.

When i use back button to move backwards.Its showing the previous page component in current route.

For example :

When i move from child2 to child1 using back button. the child1 route is still showing child html part in child1 page.

For routing i am using like this :

{ path: "parent", component: parentComponent,
  children: [ 
    { path: "child1", component: child1Component },
    { path: "child2", component: child2Component },
    { path: "child3", component: child3Component}
  ],
     data: { breadcrumb: 'Parent' }
}

I don't know why its happening .Please help!!

Version Info

@angular/cli: 1.2.6
node: 6.10.0
os: win32 x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2

would you please provide a working example? – Anas Al Hamdan Aug 03 '17 at 15:06 — Anas Al Hamdan, Aug 03 '17 at 15:06

Rohit Ramname · Answer 1 · 2017-08-03T16:27:28.373

It works with below.

Add router-outlet in Index.html page and ParentComponent's html page.

--routes.ts

 {
    path:'',
    redirectTo:'index.html',
    pathMatch:'full'
},
{
    path:'parent',
    component:ParentComponent,
    children:[
        {
            path:"child1",
            component:Child1Component
        },
        {
            path:"child2",
            component:Child2Component
        },
        {
            path:"child3",
            component:Child3Component
        }
    ]

}

--Parent.component.html

 <input type="button" (click)="goNext()" value="Next">  <router-outlet></router-outlet>

--parent.component.ts

  goNext()
  {
    this.router.navigateByUrl("/parent/child1")
  }

child1.html

  <input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" />

chil1.ts

    goNext()
  {
    this.router.navigateByUrl("/parent/child2")
  }

child2.html

 <input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" />

child2.ts

    goNext()
  {
    this.router.navigateByUrl("/parent/child3")
  }

child3.html

 <input type="button" (click)="goBack()" value="Back" />

I am using the same structure in my code only one diff is I am routing from my component instead of [routerLink] — Sarath, Aug 03 '17 at 16:04

Angular 2 routing issue in child pages

1 Answers1