Угловые маршруты дети не бьют - PullRequest
Новая
       37

Угловые маршруты дети не бьют

0 голосов
/ 30 октября 2018

Я использую последнюю версию Angular. Я пытаюсь определить маршруты с детьми, чтобы следовать адекватной иерархии.

У меня есть app-routing.module.ts, который имеет следующее: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeRoutes } from './modules/home/home-routing.module';
import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';

const routes: Routes = [
  ...QuickReferenceRoutes,
  ...HomeRoutes
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

Другие файлы, которые он вызывает для маршрута, следующие:

home-routing.module

import { Route } from '@angular/router';

import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
      { path: '', component: HomeComponent }
];

quick-reference-routing.module

import { Routes } from '@angular/router';

import { QuickRefComponent } from './quick-reference.component';
import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';

export const QuickReferenceRoutes: Routes = [
    {
        path: 'quick-reference',
        component: QuickRefComponent,
        children: [
            { path: 'test', component: CombatQRFComponent }
        ]
    },
    {
        path: 'quick-reference/combat',
        component: CombatQRFComponent
    }
];

Таким образом, после этой настройки quick-reference/combat загружает CombatQRFComponent, но при quick-reference/test CombatQRFComponent не загружает его. Он загружает QuickRefComponent вместо этого. Я пытался найти эту проблему, но я не могу найти никого с подобной проблемой.

Все учебники говорят, что если вы настраиваете свои маршруты таким образом, с дочерними маршрутами, маршрут quick-reference/test должен загружать CombatQRFComponent. Вместо этого он загружает компонент родительского маршрута.

Редактировать: вот ссылка на репо для лучшего обзора всей структуры: https://github.com/Panglot/DnD_app

1 Ответ

0 голосов
/ 30 октября 2018

попробуйте 

    import { Routes } from '@angular/router';

    import { QuickRefComponent } from './quick-reference.component';
    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';

    export const QuickReferenceRoutes: Routes = [
        {
            path: 'quick-reference',
            children: [
                { path: '', component: QuickRefComponent}
                { path: 'test', component: CombatQRFComponent }
            ]
        },
        {
            path: 'quick-reference/combat',
            component: CombatQRFComponent
        }
    ];
...