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

【问题标题】：Angular Routes not rendering child components, instead render parent componentAngular Routes 不渲染子组件，而是渲染父组件
【发布时间】：2019-06-20 06:18:31
【问题描述】：

我想创建一个嵌套路由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'
  }
];

【问题讨论】：

标签： angular routing angular-router

【解决方案1】：

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

<router-outlet></router-outlet>

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

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

【讨论】：

我明白了，所以为了一次显示一个组件，我必须将其作为另一条路线，而不是作为子路线。智利路线将始终显示在父母内部，对吗？
是的，你是对的。但是如果你没有为“父”指定一个组件（所以你删除了component: MoviesView），那么它会使用它在链中找到的第一个路由器出口（可能你只有一个路由器出口，所以它将是根组件中的一个）
@O.MeeKoh 我编辑了答案，以便为我之前的评论提供一个示例
这很完美，正是我所需要的。谢谢！
我很高兴能提供帮助。

【解决方案2】：

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

【讨论】：

在 MoviesView 中添加 <router-outlet> 是可行的，但是现在两个组件在点击 movies/:id 时都会渲染，我怎样才能让它只显示 MoviesDetailComponent 而不是 MoviesView 和 MoviesDetail？
@O.MeeKoh 嗯，你可以这样做： const routes: Routes = [ ..., { path: 'movies', component: MoviesContainer, children: [ { path: ' :id', component: MovieDetailComponent }, { path: '', component: MoviesView }, ] } ... ];