Angular 路由不渲染子组件，而是渲染父组件

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' 添加到父组件时，子组件 URL 甚至没有被击中，当我将 pathMatch: 'full' 添加到子组件时，甚至只有父组件被渲染如果 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

检查你的 <router-outlet> 指令，你必须在 MoviesView 组件中有一个。希望对您有所帮助。

Answer 2

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

<router-outlet></router-outlet>

如果你想在movies和movies/:id时有不同的看法，你需要使用第二种方法。如果你现在或将来需要在 movies 路线下多出一条路线我更愿意写成

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

Angular 路由不渲染子组件，而是渲染父组件

Angular Routes not rendering child components, instead render parent component

routing

angular

angular-router