Question

我正在尝试让我的路由在Angular 2应用程序中工作。

以下是我在app.routes.ts文件中使用的代码

export const ROUTES: Routes = [
  { path: '',      component: PublicComponent, data: { title: 'Heroes List' } },
  { path: 'home',  component: PublicComponent },
  { path: 'admin',  component: PrivateComponent, children: [
    { path: '', component: PrivateComponent },
    { path: 'account-settings', component: AccountSettingsComponent, children: [
      { path: '', component: UserInformationComponent},
      { path: 'user-information', component: UserInformationComponent},
      { path: 'companys-information', component: CompanysInformationComponent}
    ] },
  ] },
  { path: '**',    component: NoContentComponent },
];

每当我尝试导航到其中一个子路线时，它就会加载父路线。

所以我想说，例如我去： -

http://localhost:4200/#/admin

它会引入正确的组件PrivateComponent。

但是当我导航到： -

http://localhost:4200/#/admin/account-settings

或者帐户设置中的任何子项都会加载PrivateComponent而不是AccountSettingsComponent或UserInformationComponent，如上面的代码中所述。

我是否在代码中遗漏了一些内容以使其正常工作？

使用Angular CLI生成应用程序。

提前谢谢。

Answer 1

Angular是一个SPA（单页面应用程序）平台，因此它将采用单一分页技术。您需要在<router-outlet>中添加PrivateComponent，以便让Angular加载子路由＆＃39;组件在那里。 Router-outlet显示将加载子组件的位置。

有关详情，请参阅Defining Child Routes

Answer 2

组件中不需要另外<router-outlet>。

而不是在父路由中定义component，而在子节点中有一个指向父节点的根路径，如下所示：

{ path: 'admin', children: [
    { path: '', component: PrivateComponent },
    { path: 'account-settings', children: [
        { path: '', component: AccountSettingsComponent},
        { path: 'user-information', component: UserInformationComponent},
        { path: 'companys-information', component: CompanysInformationComponent}
    ] },
] },

另一方面，如果你想为每个子路由显示一个公共元素，即标题，我可以看到使用额外<router-outlet>的好处。

Angular 2 - 子路由加载父组件

2 个答案: