angular - 在 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 包含谷歌地图，每次我切换到此选项卡时都会从 beginig 加载它。我怎样才能在这里关闭延迟加载，该 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