[英]Angular with child routes load child components below parent component instead of redirecting it to another view
我有一個 MuscleComponent,它有 MuscleAddComponent 和 MuscleEditComponent 作為它的子組件。 當我點擊它們時,我試圖重定向到它的子組件,但它們出現在 MuscleComponent 的同一視圖中。
注意:當我有{ path: '', component: MusclesComponent, pathMatch: 'full' },
在肌肉路徑的子項中,我在同一頁面上得到兩個相同外觀的 MuscleComponent 的 html。 為什么會這樣? 為什么當我單擊“添加”按鈕時,它會在 MuscleComponent 的 html 上顯示 MuscleAddComponent 的內容?
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: '' }
];
應用程序組件.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>
肌肉.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>
任何幫助都受到高度贊賞。
嘗試使用forChild
在muscles.module.ts
:
RouterModule.forChild([
{
path: 'muscles', component: MusclesComponent, children: [
{ path: '', component: MusclesComponent, pathMatch: 'full' },
{ path: 'add', component: MuscleAddComponent },
{ path: ':id', component: MuscleEditComponent }
]
},
])
或者,如果您沒有單獨的模塊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: '' }
];
您的路線工作不正確,因為您的組件(例如MuscleAddComponent
、 MuscleEditComponent
實際上不是子組件)。 我的意思是它們是獨立的組件,因為它們沒有一些共享模塊。 所以你不必使用children
財產。 作為 Angular 文檔的一個例子:
src/app/crisis-center/crisis-center-routing.module.ts(路由):
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
請注意,上述路由是在單獨的模塊.../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: '' }
];
如果您從muscle.html 中刪除路由器插座,這條路線應該可以工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.