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

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 组件，这在急切加载情况下不会发生。任何有助于避免重新加载此组件的开销的帮助将不胜感激。

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

它加载了两个以默认单词为前缀的额外包。如果没有加载这些包，我的问题不会发生。我认为这是因为候选模块的某些服务正在其他延迟加载的模块中使用。任何帮助解决这个问题将不胜感激。

Answer 1

问题出在这里：

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});

试试看是否可行。