Question

我正在使用最新版本的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

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

角度路线儿童不打

1 个答案: