Angular 4 Router. Why “/path1/(<outlet-name>:'path2')” is a thing?

问题

Are this kind URLs “/services/55/(section:'data')” a workaround to connect named outlets and paths? I don't get why they can't simply be “/services/55/data” when having a Route with the outlet property specified like following:

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}

回答1:

I'll provide an answer incase anyone else comes across this issue. To use multiple router outlets and avoid having to use the aux router syntax you have to manipulate your routing. Normally you provide routes to your aux named router-outlet like the config below.

Normal named router outlet syntax

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    {
      path: 'data',
      outlet: 'section',
      component: ServicesDataComponent
    }
  ]
}

To navigate to the about route you would use /services/55/(section:'data'). You can avoid this by nesting child routes

1. Initial path will be your core path. In the above example services/:id.
2. You will then declare child routes on this path with all your sub paths. These sub paths will set the component attribute to your component that contains your aux named router-outlet.
3. Each sub path will then declare another set of children containing an empty path with the component to be loaded in the aux router outlet.

New router configuration without the aux router syntax

{
  path: 'services/:id',
  children: [
    {
      path: 'data',
      component: 'ServicesComponent',
      children: [
        {
          path: '',
          outlet: 'section',
          component: ServicesDataComponent
        }
      ]
    },
    {
      path: 'another',
      component: 'ServicesComponent',
      children: [
        {
          path: '',
          outlet: 'section',
          component: AnotherComponent
        }
      ]
    }
  ]
}

Your new route will look like /services/55/data & /services/55/another

By declaring the named aux router route with an empty path, you no longer have to deal with the aux name router outlet syntax.

回答2:

You can have multiple named outlets. Named outlets are basically a parallel substructure.
Without () the router wouldn't be able to distinguish between the parts that make the normal routes and which parts make the auxiliary routes.

You only need, and only should use named outlets in addition to unnamed ones. For example if you have a route that shows a specific parts of your application (item list > item), with auxiliary routes, you can show different menus at the side of your application (outside of the list > item section of your application)

Therefore, in your example just remove outlet: 'section' andname="section"from`.

回答3:

You're using named RouterOutlets. This feature was introduced so it was possible to have multiple router outlets on a single page or component.

The default style and convention is (when there is not multiple router outlets on a page) to have the path as a single component, in a single unnamed router outlet, using behavior as you've described:

{
  path: 'services/:id',
  component: ServicesComponent,
  children: [
    { path: 'data', component: ServicesDataComponent }
  ]
}

来源：https://stackoverflow.com/questions/45511536/angular-4-router-why-path1-outlet-namepath2-is-a-thing