Question

在我的Angular2应用程序中，我有一个如下所示的路由模块：

RouterModule.forChild([{
            path: '',
            component: HomeComponent,
            children: [
                { path: '', redirectTo: 'explorer/0' },
                { path: 'explorer', redirectTo: 'explorer/0' },
                { 
                    path: 'explorer/:id', 
                    component: EntitiesExplorerComponent,
                    children: [
                         { path: 'details', component: EntityDetailsComponent }
                    ]
                },
            ]
        },

正如您所看到的，explorer路径中有一个孩子。

奇怪的是，如果我导航到/explorer/1，我会收到错误消息。但如果我导航到/explorer/1/details，一切运作良好。

当我转到/explorer/ID时，我想提供一个资源管理器，当我转到/explorer/ID/details时，我想提供一个实体的详细信息。

这是错误:(似乎它无法识别/explorer/ID）

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined
TypeError: Cannot read property 'routes' of undefined
    at getChildConfig (http://localhost:4200/main.bundle.js:61682:35)
    at Recognizer.processSegmentAgainstRoute (http://localhost:4200/main.bundle.js:61648:27)

Answer 1

您的路由器配置应该更像这样：

RouterModule.forChild([{
    path: '',
    component: HomeComponent,
    children: [
        { path: '', redirectTo: 'explorer' },            
        { 
            path: 'explorer',                
            component: AnotherComponentWithARouterOutlet,
            children: [
                {
                    path: '',
                    redirectTo: '0',
                },
                {
                    path: ':id',
                    component: EntitiesExplorerComponent,
                    children: [
                        { path: '', redirectTo: 'details' },
                        { path: 'details', component: EntityDetailsComponent }
                    ],
                },
            ]                
        },
    ]
},

如果您现在导航到网址/explorer，路由器应自动重定向到/explorer/0路由。

您必须为explorer - 路线创建另一个组件。此组件应在其模板中包含<router-outlet></router-outlet>以加载子项。孩子是ids。如果路由中没有给出id，则路由器重定向到0。

但:id路线的EntitiesExplorerComponent带有router-outlet。路由器想要知道他必须加载到这个插座。因此，您需要为:id的子项定义空路由。在上面的示例中，我只是重定向到details。如果你不想这样，你应该为这个'' - 空路线创建另一个组件。此组件可能有一个按钮，如：Click here to go to the details或类似的东西。

奇怪的路由器行为

1 个答案: