Angular Routes 不渲染子组件，而是渲染父组件

Question

我想创建一个嵌套路由 movies/:id 但是，根据我当前的配置，当用户导航到 movies/1 时，始终会呈现父组件。我需要 MovieDetailComponent 在 movies/1 url 上呈现。这是我的配置:

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView,
    children: [{
      path: ':id',
      component: MovieDetailComponent
    }]
  },
  {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

我尝试先将 pathMatch: 'full' 添加到父组件，然后添加到子组件，然后两者都添加。当我将 pathMach: 'full' 添加到父组件时，当我仅将 pathMatch: 'full' 添加到子组件时，子 URL 甚至不会被命中组件，即使 URL 为 /movies/:id 也只会渲染父组件 为什么会发生这种情况？

当我将子路径移动到它自己的路径中而不是嵌套时，组件正确呈现。

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView
  },
  {
    path: 'movies:id',
    component: MovieDetailComponent
  } {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

Answer 1

如果你的路由包含一个组件和一个子字段，Angular 将使用该组件的路由器导出来放置子组件 DOM。因此，在您的情况下，您的 MoviesView 组件中应该有一个路由器 socket :

<router-outlet></router-outlet>

如果您想在访问 movies 和 movies/:id 时获得不同的 View ，则需要使用第二种方法。如果您现在或将来需要在电影路线下拥有不止一条额外路线，我更愿意将其写为

const routes: Routes = [
  { path: '', component: HomeView },  
  { path: 'movies',
    children: [
    { path: '', component: MoviesView }
    { path: ':id', component: MovieDetailComponent }
  ]},
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];

此外，如果您不需要 movies 路由(没有 id)，您可以这样做:

const routes: Routes = [
  { path: '', component: HomeView },  
  { path: 'movies',
    children: [
    { path: ':id', component: MovieDetailComponent }
  ]},
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];