0

我有模块A，它是延迟加载的，并且有以下给定的组件及其路由；

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），如果我不延迟加载此模块，则不会发生这种情况。我深入研究了这个问题并知道这是因为一些常见的包以默认单词为前缀，如下所示。 在此处输入图像描述

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

4

1 回答 1

0

问题在这里：

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

试试看是否可行。

于 2019-11-07T13:36:02.133 回答