Angular Router Navigate正在重新加载延迟加载的父组件

我有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>

它会继续重新加载JobViewComponent组件，这在紧急加载情况下不会发生。任何有助于避免重新加载此组件的开销的帮助都将不胜感激

编辑：

---

实际上，它可以工作，但问题是它也会重新加载父组件，即（JobViewComponent），如果我不延迟加载此模块，则不会发生这种情况。我深入研究了这个问题，并了解到之所以会发生这种情况，是因为一些以默认单词为前缀的常见包，如下所示。

它加载两个附加包，前缀为默认单词。如果未加载这些包，则不会出现问题。我认为这是因为候选模块的一些服务正在其他懒散加载的模块中使用。如果您能帮助我们解决这个问题，我们将不胜感激

问题在于：

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

因为您使用的是“../”，当您使用“../”时，您说的是导航到“localhost:4200/AppliedCandidates”，而不是根据需要导航到“localhost:4200/JobView/：id/AppliedCandidates”

在这种情况下，如果要相对于您当时所在的url（localhost:4200/JobView/：id）进行导航，则必须使用：“./”这意味着：从url添加此路径（“例如AppliedCandidates”）并导航到该路径

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

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

---

如果可行，请尝试。

我的错，我没有解释当我从与其同级的已分配候选对象导航到AppliedCandidates时会出现问题。因此，在本例中，我必须使用

this.router.navigate（['../AppliedCandidates']，{relativeTo:this.route}）

而不是使用

this.router.navigate（['./AppliedCandidates']，{relativeTo:this.route}）因为它开始给出错误，路由localhost:4200/JobView/：id/AssignedCandidates/AppliedCandidates不存在，这实际上是正确的。请查看编辑后的解释。感谢您的澄清，我不明白为什么
this.router.navigate（['../AppliedCandidates']，{relativeTo:this.route}）
在分配的候选项中不起作用。您可以将代码上载到吗？实际上，它可以工作，但问题是它也会重新加载父组件（即JobViewComponent），如果不延迟加载此模块，则不会发生这种情况。我深入研究了这个问题，并了解到之所以会发生这种情况，是因为一些以默认单词为前缀的常见软件包。请参阅编辑后的问题以获得进一步澄清。感谢您的回复，我已通过分离共享组件解决了我的问题。欢迎光临，很高兴听到您解决了这个问题。
this.router.navigate(['./AppliedCandidates'], {
      relativeTo: this.route});