Angular 7 Компоненты для загрузки при первом нажатии кнопки, а затем показать и скрыть - PullRequest
Новая
       36

Angular 7 Компоненты для загрузки при первом нажатии кнопки, а затем показать и скрыть

0 голосов
/ 19 января 2019

Я пробую онлайн-форму в Angular7, которая имеет много разделов, таких как личные данные, рабочие данные и т. Д. Здесь я хочу загрузить раздел по щелчку этого конкретного раздела, если он еще не посещен, и просто показать или скрыть, если раздел имеет был уже посещен.

Я пытаюсь из базового примера из https://angular.io/tutorial/ иметь 2 вкладки HeroDetails и Dashboard, похожие на мои поиски личных данных и рабочих деталей. Я попытался использовать [ngClass] в example1 для разделов и установить классы show или hide; но если я это сделаю, то оба раздела загружаются в начале, а затем при нажатии вкладок они отображаются или скрываются. Я также попытался * 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 по щелчку вкладки при первом щелчке, а затем просто показать или скрыть на основе текущего выбора

...