Angular 7组件在第一次单击按钮时加载，以后显示和隐藏

Question

我正在Angular7中尝试一个在线表单，其中包含许多部分，例如个人详细信息，工作详细信息等。在这里，我想单击该特定部分（如果尚未访问）时加载该部分，如果该部分具有已经被访问过。

我正在尝试https://angular.io/tutorial/中的一个基本示例，使它具有2个选项卡HeroDetails和Dashboard，类似于我对个人详细信息和工作详细信息的追求。我试图在example1的部分中使用[ngClass]并设置显示或隐藏类；但是，如果我这样做，则这两个部分都将在开始时加载，然后在单击选项卡时加载或显示这些部分。我还尝试了* ngIf在example2中按需加载所需部分（单击选项卡），但这会使服务调用在每次单击选项卡时获取数据，从而增加了服务器的不必要负载。

<nav>
    <a routerLink="" (click)="currentScreen='Dashboard'">Dashboard</a>
    <a routerLink="" (click)="currentScreen='HeroDetails'">Heroes</a>
</nav>
<!-- Example 1 -->
<div [ngClass]="{show: currentScreen==='HeroDetails', hide: currentScreen!=='HeroDetails'}">
    <app-heroes></app-heroes>
</div>
<div [ngClass]="{show: currentScreen==='Dashboard', hide: currentScreen!=='Dashboard'}">
    <app-dashboard></app-dashboard>
</div>
<!-- Example 2 -->
<div *ngIf="currentScreen==='HeroDetails'">
    <app-heroes></app-heroes>
</div>
<div *ngIf="currentScreen==='Dashboard'">
    <app-dashboard></app-dashboard>
</div>

预期结果：第一次单击该选项卡时，加载HeroDetails组件，然后根据当前选择显示或隐藏