在 ngSwitch 中关闭延迟加载

Question

我有这个代码：

<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 包含 google 地图，每次我切换到此选项卡时都会从 beginig 加载它。我怎么能在这里关闭延迟加载，那张地图将被加载一次？

Answer 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

在 ngSwitch 中关闭延迟加载

Turn of lazy loading in ngSwitch

lazy-loading

preloading

ng-switch

angular