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>

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

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

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

编辑: 实际上,它可以工作,但问题是它也重新加载了父组件,即(JobViewComponent),如果我不延迟加载该模块就不会发生。我深入研究了此问题,并发现发生这种情况是因为一些常见的软件包带有默认单词的前缀,如下所示。

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

它将加载两个带有默认单词前缀的额外软件包。如果未加载这些程序包,则不会发生我的问题。我认为这是因为在其他延迟加载的模块中使用了候选模块的某些服务。任何克服这个问题的帮助将不胜感激。

csx80088 回答:Angular Router Navigate正在重新加载延迟加载的父组件

问题在这里:

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

尝试一下是否可行。

本文链接:https://www.f2er.com/3158538.html

大家都在问