在 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包含谷歌地图和每一次我从一开始就切换到这个选项卡它的加载。我如何在这里关闭延迟加载，该地图将加载一次？

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