Angular 使用子路由加载父组件下方的子组件，而不是将其重定向到另一个视图

Question

我有一个 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: '' }
];

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>

非常感谢任何帮助。

Answer 1

尝试在 muscles.module.ts 中使用 forChild:

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 属性。 As an example from Angular docs:

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中创建的。

Answer 2

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: '' }
];

如果您从 muscles.html 移除路由器插座，这条路线应该有效

Angular 使用子路由加载父组件下方的子组件，而不是将其重定向到另一个视图

Angular with child routes load child components below parent component instead of redirecting it to another view

angular

angular2-routing