多个路由器插座

Question

我有两个路由器插座，一个在app-component.html中作为root outlet，另一个在MarketComponent中。

//app.component.html
<router-outlet (activate)="activatedComponent($event)" (deactivate)="deactivatedComponent($event)"></router-outlet>

// Market.component.html
<div class="container12">

  <button class="btn-1" 
          [routerLink]="[{outlets: {subout: ''}}]" 
          [routerLinkActive]="['active']">
          <span>Assessment</span>
  </button>

  <button class="btn-1" 
          [routerLink]="[{outlets: {subout: 'counselling'}}]"
          [routerLinkActive]="['active']">
          <span>Counselling</span>
  </button>

  <button class="btn-1"
          [routerLink]="[{outlets: {subout: 'webinar'}}]"
          [routerLinkActive]="['active']">
          <span>Webinar</span>
  </button>

<button class="btn-1"
        [routerLink]="['productDetails', {product: 'Career Wizard'}]"
        [routerLinkActive]="['active']">
        <span>CAreer Wiard</span>
</button>

  <!-- View for market components will go here. -->
  <router-outlet name="subout"></router-outlet>

</div>

//app.module.ts
{
        path: 'market',
        component: MarketComponent,
        children: [
            { path: 'productDetails',   component: DetailedDescriptionComponent},
            { path: 'counselling',      component: MarketCounsellingComponent, outlet: 'subout'},
            { path: 'webinar',          component: MarketWebinarComponent, outlet: 'subout' },
            { path: '',                 component: MarketAssessmentComponent, outlet: 'subout'},
            { path: '**',               redirectTo: 'erroror' }
        ]
    }

期望的功能：如果我访问'市场/咨询'，'市场/网络研讨会'，'市场/'，这些应该在MarketComponent内呈现。这是有效的细

但是，我想在根路由器插座中显示/渲染ProductDetailComponent组件（'market / productDetails'），即在我的 app.component.html的路由器中强大>而不是在我的MarketComponent的出口。但它没有被渲染。当我点击第4个按钮即。职业生涯向导，网址正在变化，但组件未被实例化/呈现。 我想如果我给root的路由器一个名字，那么它可能会工作。所以我这样做了。

//app.component.html
<router-outlet name="primary" (activate)="activatedComponent($event)" (deactivate)="deactivatedComponent($event)"></router-outlet>

//MarketComponent.html
<button class="btn-1"
        [routerLink]="[{outlets: {primary: ['productDetails', {product: 'Career Wizard'}]}}]"
        [routerLinkActive]="['active']">
        <span>CAreer Wiard</span>
</button>

//app.modules.ts
{
        path: 'market',
        component: MarketComponent,
        children: [
            { path: 'productDetails',   component: DetailedDescriptionComponent, outlet: 'primary'},
            { path: 'counselling',      component: MarketCounsellingComponent, outlet: 'subout'},
            { path: 'webinar',          component: MarketWebinarComponent, outlet: 'subout' },
            { path: '',                 component: MarketAssessmentComponent, outlet: 'subout'},
            { path: '**',               redirectTo: 'erroror' }
        ]
    }

但这也行不通。网址正在变化，但没有进行路由。 知道为什么会这样发生吗？