Javascript 角4子路由器未加载

在我的应用程序中，我使用了三个组件来显示路由器

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表单

url

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>

{{title}}
徽章号码
授权级别
内生性
{{badge.badge_badgeNumber}
{{badge.badge_authorizationLevel}
{{badge.badge_endOfValidity}}
永远删除你
键盘箭头左键
您的
BadgeFormComponent
中是否有任何错误？它可能会阻止组件之间的转换，并允许您插入父组件
BadgeListComponent

顺便说一下，我建议你像这样切换儿童路线：

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

因为角度路由器采用与其中一条路径匹配的第一条路由。由于有带参数和不带参数的路径，我想参数是可选的

如果您的
BadgeFormComponent
中存在一些问题，请告知我您的
BadgeFormComponent
中是否存在任何错误？它可能会阻止组件之间的转换，并允许您插入父组件
BadgeListComponent

顺便说一下，我建议你像这样切换儿童路线：

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

因为角度路由器采用与其中一条路径匹配的第一条路由。由于有带参数和不带参数的路径，我想参数是可选的

当您导航到
/badge/badge form
时，如果您的
BadgeFormComponent
中存在一些问题，请告知我，您当前的配置告诉Angular Router通过匹配
/badge
来呈现
BadgeListComponent
，然后在
BadgeListComponent
的
中渲染
BadgeFormComponent

您需要一个无组件的路由来只渲染子对象

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

当您导航到
/badge/badge form
时，您当前的配置告诉Angular Router通过匹配
/badge
来呈现
BadgeListComponent
，然后在
BadgeListComponent
中呈现
BadgeFormComponent

您需要一个无组件的路由来只渲染子对象

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

你能为
BadgeListComponent
共享你的html代码吗？@ulubeyn我添加了BadgeListComponent的html代码你能为
BadgeListComponent
共享你的html代码吗？@ulubeyn我添加了BadgeListComponent的html代码是的，我有上面的参数路径，但我认为这可能是问题。我添加了一个gif，这样当我从一个徽章传递到另一个徽章/徽章表单时，您可以看到，我的控制台保持清晰，没有错误。虽然，我注意到，当我转到url时，知道它应该是SPA应用程序有点慢。是的，我有上面的param路径，但我认为这可能是问题所在。我添加了一个gif，这样当我从一个徽章传递到另一个徽章/徽章表单时，您可以看到，我的控制台保持清晰，没有错误。不过，我注意到，当我转到url时，知道它应该是SPA应用程序有点慢。它起作用了，谢谢。但它不以另一种方式工作是正常的吗？就像所有的教程和官方文档都像我一样。@ImadElHitti它按预期工作。例如，您可能希望您的
徽章
模块在每个页面上都有特定于模块的标题/导航。在这种情况下，您可以像以前一样进行路由，将共享代码放在顶级组件中，然后添加一个
，以标记希望在顶级组件中呈现子级的位置。只需指定路由规则，您就可以有效地创建整个组件树。谢谢。但它不以另一种方式工作是正常的吗？就像所有的教程和官方文档都像我一样。@ImadElHitti它按预期工作。例如，您可能希望您的
徽章
模块在每个页面上都有特定于模块的标题/导航。在这种情况下，您可以像以前一样进行路由，将共享代码放在顶级组件中，然后添加一个
，以标记希望在顶级组件中呈现子级的位置。只需指定路由规则，就可以有效地创建整个组件树。