CODEWITHSUNDEEP
angulartypescriptroutes
sapiensapiens
sapiensapiens

Reputation: 123

Children in routing does not show the page Angular

I am working with routing in Angular 8. I am trying to make a router in a router, that means using children. The first routing works, but the second one gets the right url but the page does not change.

    const routes: Routes = [
      {
        path: "", 
        component: Component
      },
{
        path: "things", 
        component: Component1
      },
      {
        path: "partA/:id",
        component: Component2,
        children: [
          {
              path: 'partB/:id',
              component: Component3
          }]


        }
        ];

    @NgModule({
      imports: [RouterModule.forRoot(routes), RouterModule.forChild(routes)],
      exports: [RouterModule]
    })

in Component1.ts (works)

this.router.navigate(["partA" + item['name']], {state: {data: item}})

in Component2.ts:

 this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})

In that case the url in the browser is fine and I don't get any error, but the page is still Component2, any change. And I added <router-outlet></router-outlet> in Component1 and Component2.

I also tried this but I got the same problem

{
     path: "house/character/:id",
     component: InfoCharacterComponent
   },

Upvotes: 1

Views: 66

Answers (2)

rkparmar
rkparmar

Reputation: 142

If partA:id available in partB than you could use it as below. This would work with your route example.

this.router.navigate(["partA/" + partAid + "/partB" + item['name']], {state: {data: item}})

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Since it's defined as a child, your route URL would be something like partA/:id/partB/:id, while what you are trying is this.router.navigate(["partA/partB" + item['name']], {state: {data: item}}) which falls as partA/partB/:id that does not exist.

Your solution is to either modify the route or call navigate with the defined format.

Upvotes: 1

Related Questions