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