Angular2 Router

Question

我有三个组成部分：

1. 作为组件引导的根组件（root）与app 模块。
2. 包含工具栏的工具栏组件（toolbar） 所有的孩子。
3. 仪表板组件（dashboard）即 第一页真实页面。

因此，root和toolbar不应拥有自己的网址，而dashboard也应如此。在生成的HTML中，我希望它们被放入 通过以下方式彼此：

<root>
  <toolbar>
    ...some toolbar inner code
    <dashboard>
      ...dashboard page code
    </dashboard>
  </toolbar>
</root>

所有这些代码都应该由单个URL加载：http：/// dashboard

现在我有以下代码：

root模块路由

const rootRoutes: Routes = [
  {path: '', component: ToolbarComponent},
];

toolbar模块路由

const toolbarRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent},
];

虽然有效，但会将toolbar组件替换为dashboard。

我应该如何编写Routes数组以满足此需求？使用ui-router并在AngularJS上弃用component router，我可以执行此操作。

Answer 1

在router-outlet的模板中添加ToolbarComponent

你的路线配置就像

const rootRoutes: Routes = [
    { path: '',
      component: ToolbarComponent,
      children: {
        { path: 'dashboard', component: DashboardComponent }
      }
];

现在/dashboard将呈现工具栏和信息中心