Angular2 Router 中的两个组件可以抽象吗

Question

I have three components:

1. Root component ( root ) that is a component bootstraps with app module.
2. Toolbar component ( toolbar ) that contains toolbar for all it's children.
3. Dashboard component ( dashboard ) that is first real page.

So the root and toolbar should not have it's own URL, and dashboard should. At the resulting HTML I expect that they are put into each other in the following way:

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

And all of this code should be loaded by single URL: http:///dashboard

Now I have following code:

root module routing

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

toolbar module routing

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

It works, but replaces toolbar component with dashboard .

How should I write my Routes arrays to fulfil this demand? With ui-router and deprecated component router on AngularJS I can do this.

Answer 1

Add a router-outlet in ToolbarComponent 's template

And your route config will be like

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

Now /dashboard will render both Toolbar and Dashboard