Angular 中的上一个和下一个按钮

Question

我想在 Angular 4 中使用 prev 和 next 按钮从第 1 页转到第 4 页。 从 1 到 4 的每个页面都是一个单独的组件。

我的按钮组件位于每个页面的底部。

<div class="d-flex flex-row">
 <div class="trade-75"><button type="button" class="btn trade-back">

 </button></div>
 <div class="trade-10"><button type="button" class="btn trade-next">

 </button></div>
</div>

我正在考虑将所有组件放入一个数组并循环考虑这个数组，但我不知道如何在 Angular 4 中执行此操作:)。有没有人可以帮助我？

Answer 1

我可能会做一些像这样简单的事情

<div class="page">
    <my-first-page *ngIf="currentPage == 0"></my-first-page>
    <my-second-page *ngIf="currentPage == 1"></my-second-page>
    <my-third-page *ngIf="currentPage == 2"></my-third-page>
    <my-fourth-page *ngIf="currentPage == 3"></my-fourth-page>
</div>
<div class="d-flex flex-row">
    <div class="trade-75">
        <button type="button" class="btn trade-back" (click)="changePage(-1)"></button>
    </div>
     <div class="trade-10">
        <button type="button" class="btn trade-next" (click)="changePage(1)"></button>
    </div>
</div>

在一个组件中

export class WizardComponent {
    public currentPage = 0;
    public changePage(delta: number): void {
        // some checks
        currentPage += delta;
    }
}