Angular路由器导航正在重新加载延迟加载的父组件

Question

我有懒加载的ModuleA，并且具有以下给定的组件及其路由；

path: 'JobView/:id', component: JobViewComponent, children: [
  { path : '', redirectTo: 'AppliedCandidates', pathMatch: 'full'},
  { path: 'AppliedCandidates', component: AppliedCandidatesComponent },
  { path: 'AssignCandidates', component: AssignCandidatesComponent }
]

JobViewComponent的内容看起来像这样；

  <div class="col-xl-3 pr-3">
    <job-detail-view> </job-detail-view>
  </div>
  <div class="col-xl-9 pl-3">
    <div class="portlet">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

当我使用路由器导航导航到任何同级路由时，例如通过单击使用AssignedCandidates中的链接导航到AppliedCandidates，

this.router.navigate(['../AppliedCandidates'], {
      relativeTo: this.route});

它也一直在重新加载JobViewComponent组件，在急切加载的情况下不会发生。任何避免重新加载此组件的开销的帮助将不胜感激。

Answer 1

问题在这里：

this.router.navigate(['../AppliedCandidates'], {
      relativeTo: this.route});

因为您使用的是'../'，所以当您使用'../'时，是说导航到'localhost：4200 / AppliedCandidates'，而不是导航到'localhost：4200 / JobView /：id / AppliedCandidates'想要。

在这种情况下，如果要相对于当时的网址（localhost：4200 / JobView /：id）进行导航，则必须使用：'./'，这意味着：从网址中添加此路径（例如“ AppliedCandidates”），然后导航到那里。

总之，您必须像这样导航：

this.router.navigate(['./AppliedCandidates'], {
      relativeTo: this.route});

尝试一下是否可行。