I have a MuscleComponent which has MuscleAddComponent and MuscleEditComponent as its child components. I am trying to redirect to its child components when I click on them but instead they appear on the same view of MuscleComponent.
Note: When I have { path: '', component: MusclesComponent, pathMatch: 'full' },
in the children of muscle path I get two same appearance of MuscleComponent's html on same page. Why is it so? and Why when I click on Add button it shows the content of MuscleAddComponent on MuscleComponent's html?
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{
path: 'muscles', component: MusclesComponent, children: [
{ path: '', component: MusclesComponent, pathMatch: 'full' },
{ path: 'add', component: MuscleAddComponent },
{ path: ':id', component: MuscleEditComponent }
]
},
{ path: 'workouts', component: WorkoutsComponent },
{ path: 'myplanner', component: MyPlannerComponent },
{ path: '**', redirectTo: '' }
];
app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="../assets/images/logo.png" height="60px" style="padding: 0px; margin: 0px;">
</a>
<app-menus></app-menus>
</nav>
<router-outlet></router-outlet>
muscles.component.html
<div class="container-fluid">
<div class="row" style="padding: 25px;">
<div class="col-md-6">
<h2>Manage Muscles</h2>
</div>
<div class="col-md-6">
<div class="float-right">
<button type="button" class="btn btn-secondary" [routerLink]="['./add']">Add New</button>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
Any help is highly appreciated.
Try to use forChild
in your muscles.module.ts
:
RouterModule.forChild([
{
path: 'muscles', component: MusclesComponent, children: [
{ path: '', component: MusclesComponent, pathMatch: 'full' },
{ path: 'add', component: MuscleAddComponent },
{ path: ':id', component: MuscleEditComponent }
]
},
])
or if you don't have separate module muscles.module.ts
:
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'muscles', component: MusclesComponent, pathMatch: 'full'}
{ path: 'muscles/add', component: MuscleAddComponent },
{ path: 'muscles/:id', component: MuscleEditComponent },
{ path: 'workouts', component: WorkoutsComponent },
{ path: 'myplanner', component: MyPlannerComponent },
{ path: '**', redirectTo: '' }
];
Your routes were working incorrectly as your components such as MuscleAddComponent
, MuscleEditComponent
are not actually children. I mean they are separate components, because they do not have some shared module. So you don't have to use children
property. As an example from Angular docs :
src/app/crisis-center/crisis-center-routing.module.ts (Routes):
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
Pay attention that the above route is created in separate module .../crisis-center-routing.module.ts
.
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{
path: 'muscles', children: [
{ path: '', component: MusclesComponent },
{ path: 'add', component: MuscleAddComponent },
{ path: ':id', component: MuscleEditComponent }
]
},
{ path: 'workouts', component: WorkoutsComponent },
{ path: 'myplanner', component: MyPlannerComponent },
{ path: '**', redirectTo: '' }
];
if you remove the router-outlet from muscles.html this route should work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.