0

我有两个路由器插座，一个在 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' }
        ]
    }

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

但是，我想在根路由器插座中显示/呈现 ProductDetailComponent 组件（'market/productDetails'），即在我的 app.component.html 的路由器插座中，而不是在我的 MarketComponent 插座中。但它没有被渲染。当我点击第四个按钮时，即。Career Wizard，网址正在更改，但组件未实例化/呈现。我想如果我给根的路由器插座一个名字，那么它可能会起作用。所以我这样做了。

//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' }
        ]
    }

但这也行不通。网址正在更改，但未完成路由。知道为什么会这样吗？

4

0 回答 0