Angular 路由器似乎可以工作，但无法加载组件

Question

我有这样的路径结构：/events/100/drawing/200事件和绘图是具有自己的路由表的单独模块，例如：

// Event ID routes
const routes: Routes = [
{
    path: ':eventID', 
    data: { breadcrumb: 'Drawings & Results' },
    component: EventComponent,

    children: [
        {
            path: 'drawing', 
            loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
        }
    ]
}

和

const routes: Routes = [
{
    path: ':drawingID', 
    data: { breadcrumb: 'Drawing' },
    component: EventDrawingComponent
},
];

有一个面包屑向我显示当前路径，并且路由似乎有效。但无论如何，已EventComponent加载，但未按EventDrawingComponent预期加载。

我也尝试这样做来删除EventComponent：

// Event ID routes
const routes: Routes = [
{
    path: ':eventID', 
    data: { breadcrumb: 'Drawings & Results' },

    children: [
        {
            path: 'drawing', 
            loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
        }
    ]
}

现在EventDrawingComponent已加载，但当然/events/100不再工作了。请你告诉我我的代码有什么问题吗？

Answer 1

确保您<router-outlet></router-outlet>的父模板中有某个位置。Angular 路由器在那里渲染加载的组件。没有它，您的组件类将被实例化，但无法呈现。

另外，请确保您已将其添加RouterModule到imports父模块中的数组中。