角4子供のルータはローディングしていません

Question

私のアプリケーションでは、私はルータで見せていた3つのコンポーネントを持っていました。

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

私は、フォームに行くとき私は私のルーティング設定を変更する代わりに/badge-formのURLでこの/badge/badge-formようなものを持っていると思ったので：残念ながら、それは働いていないと私はできません

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

なぜ私が/badge/badge-form URLに行っても、それはいつも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に移動すると、あなたの現在の構成がBadgeListComponentさん<router-outlet>内BadgeFormComponentをレンダリングし、その後、/badgeを照合することによってBadgeListComponentをレンダリングする角度ルータに指示します。

子供のみをレンダリングするには、コンポーネントレスルートが必要です。

{ 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に問題がある場合はお知らせください。