Question

我有一个Angular 7应用程序，其中包含多个延迟加载的功能模块。我的主要路由模块配置如下：

{
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'competitions',
        loadChildren: './competitions/competitions.module#competitionsModule'
      }
    ]
}

我可以成功导航到/competitions，它将列出比赛并在<router-outlet>的主未命名HomeLayoutComponent中呈现所有内容。

我对CompetitionsModule的路由看起来像

{
    path: '',
    component: CompetitionsPageComponent,
    pathMatch: 'full',
},
{
    path: ':id',
    component: CompetitionDetailsPageComponent,
    children: [
    {
        path: 'participants',
        component: ParticipantsComponent,
        outlet: 'competitionDetailsContent',
    }
    ]
},
{
    path: '**',
    redirectTo: ''
}

我可以导航到/competition/123以查看该特定比赛的详细信息，但这就是结束的地方。在CompetitionsDetailsPageComponent及其对应的模板内部，我有一个命名的插座，该插座应根据选项卡的选择显示组件。例如，我应该能够单击一个选项卡，并使用路由器链接来显示路线为/competitions/123/participants的比赛参与者。使用当前的路由配置，结果是我被重定向回/competitions。

我尝试将:id作为子路由添加到''而不起作用，并且我在SO上扫描了所有可能的解决方案，但没有任何运气。我应该提到我的<router-outlet name="competitionDetailsContent">位于*ngIf内部，但是我不确定是否会影响我的路由。

我尝试了以下routerLink替代方案：

[routerLink]="['', { outlets: { competitionDetailsContent: ['participants'] } }]

和[routerLink]="['./participants', {outlets: competitionDetailsContent}]"都没有成功。

设置此路由的正确方法是什么？我发现的所有示例仅涉及非延迟加载的模块。

Answer 1

选项卡是编辑页面的子代：

我使用子路线而非辅助（命名）路线构建了标签。

这是我的路线配置示例：

RouterModule.forChild([
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id',
    component: ProductDetailComponent
  },
  {
    path: ':id/edit',
    component: ProductEditComponent,
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: ProductEditInfoComponent },
      { path: 'tags', component: ProductEditTagsComponent }
    ]
  }
])

]

这是带有选项卡和routerLink指令的ProductEditComponent HTML：

<div class="card">
  <div class="card-header">
    {{pageTitle}}
  </div>

  <div class="card-body"
       *ngIf="product">
    <div class="wizard">
      <a [routerLink]="['info']"
         routerLinkActive="active">
        Basic Information<span [ngClass]="{'fa fa-exclamation': !isValid('info')}"></span>
      </a>
      <a [routerLink]="['tags']"
         routerLinkActive="active">
        Search Tags<span [ngClass]="{'fa fa-exclamation': !isValid('tags')}"></span>
      </a>
    </div>

    <router-outlet></router-outlet>

    <div class="row mb-2">
      <div class="col-md-4">
        <button class="btn btn-primary mr-3"
                style="width:80px"
                type="button"
                title="Save your entered data"
                [disabled]="!isValid()"
                (click)="saveProduct()">
          Save
        </button>
        <button class="btn btn-outline-secondary mr-3"
                style="width:80px"
                type="button"
                title="Cancel your edits"
                [routerLink]="['/products']">
          Cancel
        </button>
        <button class="btn btn-outline-warning"
                style="width:80px"
                type="button"
                title="Delete this product"
                (click)="deleteProduct()">
          Delete
        </button>
      </div>
    </div>
  </div>
</div>

您可以在此处找到完整的示例：https://github.com/DeborahK/Angular-Routing

（尽管目前它在Angular v2中。我正在努力将其迁移到v7中。）

惰性加载的模块中的子路由未激活

1 个答案: