[英]Angular 4 Children router not loading
在我的应用程序中,我曾使用路由器展示了三个组件。
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
,而不是/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>
当您导航到/badge/badge-form
,当前配置告诉Angular Router通过匹配/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 }
]
}
BadgeFormComponent
是否有任何错误? 它可能阻止了组件之间的转换,并让您陷入父组件BadgeListComponent
。
顺便说一句,我建议您像这样切换子级路由:
...
children: [
{ path: 'badge-form/:id', component: BadgeFormComponent },
{ path: 'badge-form', component: BadgeFormComponent }
]
...
因为Angular Router会选择与其中一个路径匹配的第一条路由。 由于您具有带和不带参数的路径,因此我猜参数是可选的。
让我知道您的BadgeFormComponent
是否有问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.