Угловые маршруты не рендерит дочерние компоненты, а рендерит родительский компонент - PullRequest
Новая
       17

Угловые маршруты не рендерит дочерние компоненты, а рендерит родительский компонент

0 голосов
/ 26 января 2019

Я хочу создать вложенный маршрут 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'
  }
];

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Если у вас есть маршрут, в котором есть компонент, а также дочернее поле, 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 (без идентификатора) вы можете сделать: 

const routes: Routes = [
  { path: '', component: HomeView },  
  { path: 'movies',
    children: [
    { path: ':id', component: MovieDetailComponent }
  ]},
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];
0 голосов
/ 26 января 2019

Проверьте ваши <router-outlet> директивы, они должны быть внутри компонента MoviesView .Надеюсь, это поможет.

...