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有一些問題。