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

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

0 голосов
/ 05 декабря 2018

Я пытаюсь ориентироваться в моем приложении Angular на основе концепции родительского дочернего элемента.При загрузке родительский компонент загружается вместо дочернего, но URL кажется 

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'solutions', component: SolutionComponent,
    children: [
      { path: 'cog', component: CogComponent }
    ]
  },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

Когда я запускаю solutions/cog, он перенаправляется на SolutionComponent, но должен загружаться CogComponent

РЕДАКТИРОВАТЬ: 1

Это будет работать, когда я использую 

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'solutions', component: SolutionComponent },
  { path: 'solutions/cog', component: CogComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

Но я хочу, чтобы он загружался сверху методом.

Пожалуйста, помогите решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Ваш второй Appraoch работает, потому что Angular загрузит шаблон CogComponent в самом Parent Router Outlet.Если это то, что вы хотите, тогда вы можете использовать этот подход.

Но если вы хотите иметь SolutionComponent в качестве родителя для CogComponent, то вам придется добавить<router-outlet></router-outlet> до solution.component.html.

Вот как: 

...

<router-outlet></router-outlet>

Это скажет Angular, что ему нужно загрузить туда CogComponent, поскольку /cog - это ChildМаршрут к маршруту /solution.

Вот Рабочий образец StackBlitz для вашей ссылки.

0 голосов
/ 05 декабря 2018 
...
{
    path: 'solutions', component: SolutionComponent,
    children: [
        { path: 'cog', component: CogComponent }
    ]
},
...

Поскольку вы объявили component для пути solutions, следовательно, он показывает SolutionComponent, и он будет отображать CogComponent во вложенном router-outlet

{ path: 'dashboard', component: DashboardComponent },
{
    path: 'solutions'
    children: [
        { path: 'cog', component: CogComponent },
        { path: '', component: SolutionComponent, pathMatch: 'full'}
    ]
},
...

вышеуказанный маршрут должен работать так, как вы предполагали

...