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父模块中的数组。