How to render the child route into the router-outlet of the parent`s parent

问题

AngularJS 1.x ui-router has the extreme flexible concept of viewports. They seem to me like named routes but offer much more flexibility.

The routes with viewports are not divided into something like primary/aux routes. They are just put anywhere in the html with the ui-view and you can reference them by viewport name from your states/routes.

Now with the new angular 2 router 3 by viktor savkin I can not find that flexibility because the <router-outlet> is directly put to the component, so it seems bound to it.

Maybe my approach is too ui-router like...

Although I know of the angular ui-router for ng2 I do not want to use it:

I have created some sketches (with typos in the url sadly, but I lost the original sketch somehow...)that you understand more what I wanna achieve:

When I am on the state/url /projects/1 - which would be a componentless route with the angular router 3 alpha... - and click the open button of the project then the child meetings for this project are rendered into

I am jumping from one error to the other like:

- can not read data annotations of undefined
- can not find primary outled
- can not find any matching route...

This is a pretty mess to setup this common scenario.

One of the things I tried:

  { path: 'projects', component: ProjectsRootComponent, children: [
      { path: '', component: ProjectsListComponent },
      { path: 'create', component: ProjectsCreateComponent },
      { path: ':id', children:[ // componentless route
           { path: 'meetings',  component: MeetingsListComponent},
      ]}
    ]
  },

I would be glad about any help on this else I try the ui-router which offers an easier and more obvious concept at first sight.

来源：https://stackoverflow.com/questions/38192020/how-to-render-the-child-route-into-the-router-outlet-of-the-parents-parent