Question

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

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

dotnet publish

我正在考虑将所有组件放入一个数组并循环思考这个数组，但我不知道如何在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;
    }
}

Angular中的Prev和Next按钮

1 个答案: