在我的应用程序中,我曾使用路由器展示了三个组件。
export const routing = RouterModule.forRoot([
{ path: '', component: HomeListComponent },
{ path: 'badge', component: BadgeListComponent},
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]);
因为当我转到表单时,我想在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 }
]
}
不幸的是,它无法正常工作,我无法找到原因,即使我进入
BadgeListComponent
网址,它也总是加载/badge/badge-form
。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通过匹配BadgeListComponent
渲染/badge
,然后在BadgeFormComponent
的BadgeListComponent
中渲染<router-outlet>
。
您需要无组件路线仅渲染子代。
{ path: '', component: HomeListComponent },
{
path: 'badge',
children: [
{ path: '', component: BadgeListComponent },
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]
}
关于javascript - Angular 4 child 路由器未加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45412550/