Angular路线children不打

Question

我使用的是最新版本的 Angular。我正在尝试使用 children 定义路由以遵循适当的层次结构。

我有 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。我试图寻找这个问题，但我似乎找不到有类似问题的人。

所有教程都说，如果您像这样配置路由，使用 children 路由，路由 quick-reference/test 应该加载 CombatQRFComponent。相反，它加载 parent 路由的组件。

编辑：这里是一个 link 到 repo 以便更好地查看整个结构：https://github.com/Panglot/DnD_app

Answer 1

试试这个

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

Angular路线children不打

Angular routes children do not hit

routing

children

angular