在 ngSwitch 中开启延迟加载

【问题标题】：Turn of lazy loading in ngSwitch在 ngSwitch 中开启延迟加载
【发布时间】：2023-03-22 13:18:01
【问题描述】：

我有这个代码：

<ng-container [ngSwitch]="currentTab">
  <div [@ngSwitch]="'show'" *ngSwitchCase="1"><app-sub-search></app-sub-search></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="2"><app-filters></app-filters></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="3"><app-map></app-map></div>
</ng-container>

app-map 包含谷歌地图，并且每次我切换到此选项卡时，它的负载都是从开始的。我怎样才能在这里关闭延迟加载，该地图将被加载一次？

【问题讨论】：

标签： angular lazy-loading preloading ng-switch

【解决方案1】：

您可以在要预加载的组件上使用hidden 指令而不是*ngSwitchCase。

<ng-container [ngSwitch]="currentTab">
  <div *ngSwitchCase="1"><app-sub-search></app-sub-search></div>
  <div *ngSwitchCase="2"><app-filters></app-filters></div>
  <div [hidden]="currentTab !== 3"><app-map></app-map></div>
</ng-container>

使用hidden 将允许在加载时创建<app-map> 的实例，但会在需要时将其隐藏。

演示：https://stackblitz.com/edit/angular-vfnzja

【讨论】：