Angular 4儿童路由器不加载

Question

在我的应用程序中，我有三个组件，我曾用路由器显示。

export const routing = RouterModule.forRoot([ 
    { path: '', component: HomeListComponent }, 
    { path: 'badge', component: BadgeListComponent}, 
    { path: 'badge-form', component: BadgeFormComponent }, 
    { path: 'badge-form/:id', component: BadgeFormComponent } 
]); 

因为我想有这样的事情/badge/badge-form的网址，而不是/badge-form当我去到窗体我改变了我的路由配置到：

{ path: '', component: HomeListComponent }, 
{ 
    path: 'badge', 
    component: BadgeListComponent, 
    children: [ 
     { path: 'badge-form', component: BadgeFormComponent }, 
     { path: 'badge-form/:id', component: BadgeFormComponent } 
    ] 
} 

遗憾的是它不工作，我不能设法找到原因，即使我访问/badge/badge-form网址，它总是加载BadgeListComponent。对于BadgeListComponent

HTML代码：

<div class="material-card-wide mdl-card mdl-shadow--2dp"> 
    <div class="mdl-card__title mdl-card--border"> 
    <h2 class="mdl-card__title-text">{{ title }}</h2> 
    </div> 
    <div class="list-card-body"> 
    <table class="data-table-format"> 
     <thead> 
     <tr> 
      <th>badgeNumber</th> 
      <th>authorizationLevel</th> 
      <th>endOfValidity</th> 
      <th></th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let badge of pagedItems" (click)="editBadge(badge.badge_badgeNumber)"> 
      <th>{{ badge.badge_badgeNumber }}</th> 
      <th>{{ badge.badge_authorizationLevel }}</th> 
      <th>{{ badge.badge_endOfValidity }}</th> 
      <td width="5%" (click)="deleteConfirmation(badge.badge_badgeNumber); $event.stopPropagation();"> 
      <i class="material-icons delete-data-icon">delete_forever</i> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 

    <!-- pager --> 
    <div class="mdl-paging" *ngIf="pager.pages && pager.pages.length"> 
    <button [disabled]="pager.currentPage === 1" 
     class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" 
     (click)="setPage(pager.currentPage - 1)"> 
     <i class="material-icons">keyboard_arrow_left</i> 
    </button> 
    <a *ngFor="let page of pager.pages" 
     [class.selected]="pager.currentPage === page" 
     class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" 
     (click)="setPage(page)"> 
     {{ page }} 
    </a> 
    <button [disabled]="pager.currentPage === pager.totalPages" 
     class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" 
     (click)="setPage(pager.currentPage + 1)"> 
     <i class="material-icons">keyboard_arrow_right</i> 
    </button> 
    <br /> 
    <span class="paginationStats">Pages {{ pager.startPage }}-{{ this.pager.endPage }} of {{ pager.totalPages }}</span> 
    </div> 
    <div class="mdl-card__actions mdl-card--border"> 
    <div class="buttonHolder"> 
     <button routerLink="../badge-form" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary" *ngIf="!editing"> 
     Add 
     </button> 
    </div> 
    </div> 
</div> 

Answer 1

当您导航到/badge/badge-form，当前的配置告诉路由器角通过匹配/badge呈现BadgeListComponent，然后渲染内BadgeListComponent的<router-outlet>BadgeFormComponent。

您需要一个无组件路由才能呈现子项。

{ path: '', component: HomeListComponent }, 
{ 
    path: 'badge', 
    children: [ 
     { path: '', component: BadgeListComponent }, 
     { path: 'badge-form', component: BadgeFormComponent }, 
     { path: 'badge-form/:id', component: BadgeFormComponent } 
    ] 
} 

Answer 2

是否有任何错误在你BadgeFormComponent？它可能会阻止组件之间的转换，并让您粘在父组件BadgeListComponent中。

顺便说一句，我建议你给孩子路由交换机是这样的：

... 
children: [ 
    { path: 'badge-form/:id', component: BadgeFormComponent }, 
    { path: 'badge-form', component: BadgeFormComponent } 
] 
... 

由于角路由器需要相匹配的路径之一的第一途径。既然你有路径和没有参数，我猜参数是可选的。

让我知道如果你在你的BadgeFormComponent有一些问题。