Показать / скрыть дочерние компоненты
Представьте себе следующий фрагмент HTML-кода, который является шаблоном компонента Angular:
<form [formGroup] = "myForm">
<app-one></app-one>
<app-two [someService] = "someService"></app-two>
<app-three></app-three>
<button type = "button" (click) = "submit()">Submit</button>
<button type = "button" (click) = "next()">Next</button>
</form>
Я хочу не показывать все дочерние компоненты сразу (пользовательский интерфейс станет слишком большим), а по одному при нажатии кнопки Next. Во-первых,
Я хочу, чтобы появился <app-one>, затем после Next<app-two> для замены <app-one> и после второго Next щелкните <app-three> для замены <app-two> и
Кнопка Submit для замены кнопки Next.
Я могу реализовать это, используя директивы *ngIf, однако я уверен, что должен быть лучший способ сделать это (используя ng-template, ng-container?).
Любая помощь?
Ответы 2
Я думаю, что то, что вы представляете, похоже на степпер, этот ссылка на сайт покажет вам пример.
Вы также можете создать переменную, чтобы сохранить шаг, на котором находится пользователь. Например:
<form [formGroup] = "myForm">
<app-one *ngIf = "step==1"></app-one>
<app-two *ngIf = "step==2" [someService] = "someService"></app-two>
<app-three *ngIf = "step==3"></app-three>
<button type = "button" (click) = "submit()">Submit</button>
<button type = "button" (click) = "next()">Next</button>
</form>
Правильный. * ngIf без надобности увеличит цикломатическую сложность. Используйте * ngSwitchCase.
<form [formGroup] = "myForm" [ngSwitch] = "currentStep">
<app-one *ngSwitchCase = "step-1"></app-one>
<app-two *ngSwitchCase = "step-2" [someService] = "someService"></app-two>
<app-three *ngSwitchCase = "step-3"></app-three>
<button type = "button" (click) = "submit()">Submit</button>
<button type = "button" (click) = "next()">Next</button>
</form>
Значение currentStep можно обновить из следующего метода
public next(): void {
// Default value of selectedStep being 1
currentStep = `step-${++this.selectedStep}`;
}