Angular 角度菜单中的“上一步”和“下一步”按钮

我想从第1页转到第4页，在第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:）中这样做。有人能帮我吗？

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

<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>

---

你的方法很好，但应用程序将成长，所以我将有超过4个组件，然后这将很难实现modify@JohnSmith我明白你的意思。也许你会发现这个答案很有用：

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