Angular 多路由器出口

我有两个路由器出口，一个在app-component.html中作为根出口，另一个在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' }
        ]
    }

//app.component.html
//Market.component.html
评估
咨询
网络研讨会
职业维亚德
//app.module.ts
{
路径：“市场”，
组件：市场组件，
儿童：[
{路径：'productDetails'，组件：DetailedDescriptionComponent}，
{路径：'consulting'，组件：marketconsultingcomponent，outlet:'subout'}，
{path:'webinar'，组件：marketwebinar组件，outlet:'subout'}，
{路径：''，组件：MarketAssessmentComponent，出口：'subout'}，
{路径：'**'，重定向到：'error'}
]
}

所需功能：如果我访问“市场/咨询”、“市场/网络研讨会”、“市场/”，这些功能应该在MarketComponent中呈现。这很好

但是，我希望在根路由器出口中显示/呈现ProductDetailComponent组件（'market/productDetails'），即在我的app.component.html的路由器出口中，而不是在我的MarketComponent的出口中。但它并没有被渲染。当我单击第四个按钮，即职业向导时，url正在更改，但组件没有实例化/呈现。 我想如果我给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' }
        ]
    }

//app.component.html
//MarketComponent.html
职业维亚德
//app.modules.ts
{
路径：“市场”，
组件：市场组件，
儿童：[
{路径：'productDetails'，组件：DetailedDescriptionComponent，出口：'primary'}，
{路径：'consulting'，组件：marketconsultingcomponent，outlet:'subout'}，
{path:'webinar'，组件：marketwebinar组件，outlet:'subout'}，
{路径：''，组件：MarketAssessmentComponent，出口：'subout'}，
{路径：'**'，重定向到：'error'}
]
}

但这也不起作用。url正在更改，但未完成路由。

---

你知道为什么会这样吗？

你需要为你的市场/产品详细信息路线定义单独的路线如果你想在根

路由器出口中显示
DetailedDescriptionComponent
，你不能将它作为市场路径的子路径。它必须是根级别的路径。@AamirKhan谢谢你的帮助。