Angular Material Stepper的“分页”

Question

我有很多步骤在我的步进器中，所以我想将其分成两部分，即当用户进入向导时，步进器标题仅显示1-2-3-4，然后当第4步完成并且用户进入第5步时，标题显示5-6-7-8，以此类推下去。

你知道怎么实现吗？

提前感谢。

编辑：

我尝试使用*ngIf来隐藏/显示步骤，但它会从步进器数组中删除那些步骤，因此当步骤隐藏时输入的信息会丢失。

这是我的*ngIf方法：https://stackblitz.com/edit/angular-material2-beta-kknvx9

另外，也尝试了类似于[hidden]的方法，但根本不起作用。

- Alejosaur

---

你认为使用两个步进电机代替一个，每个电机都有4个步骤，这个想法怎么样？ - Ashot Aleqsanyan

尝试使用display:none而不是ngIf来隐藏它们。 - Sergey

Answer 1

问题在于，当 mat-step 呈现时，它会更改为 mat-step-header ，任何自定义类或属性都将消失。

以下代码是有效的，但过于混乱。最好的解决方案是找到另一个向导组件，具有您所需的内容，或者提交一个请求给GitHub上的Material开发人员，以添加一个隐藏标志到 mat-step 中。

类： StackBlitz

export class AppComponent implements OnInit, AfterViewInit{
  private ngVersion: string = VERSION.full;

  MAX_STEP = 7;

  @ViewChild('stepper') private myStepper: MatStepper;
  step: number = 0;
  page:number = 0;

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.rerender();
  }

  goBack() {
    if (this.step > 0) {
      this.step--;
      this.myStepper.previous();
    }
    this.page = this.step > 3 ? 1 : 0;
    this.rerender();
  }

  goForward() {
    if(this.step < this.MAX_STEP) {
      this.step++;
      this.myStepper.next();
    }
    this.page = this.step > 3 ? 1 : 0;
    this.rerender() 
  }

  private rerender() {

    let headers = document.getElementsByTagName('mat-step-header');
    let lines = document.getElementsByClassName('mat-stepper-horizontal-line');

    for (let h of headers) {
      if (this.page === 0) {
        if (Number.parseInt(h.getAttribute('ng-reflect-index')) > 3) {
          h.style.display = 'none';
        }
        else {
          h.style.display = 'flex';
        }
      }
      else if (this.page === 1) {
        if (Number.parseInt(h.getAttribute('ng-reflect-index')) < 4) {
          h.style.display = 'none';
        }
        else {
          h.style.display = 'flex';
        }
      }
    }

    for (let i = 0; i < lines.length; i++) {
      if (this.page === 0) {
        if (i > 2) {
          lines[i].style.display = 'none';
        }
        else {
          lines[i].style.display = 'block';
        }
      }
      else if (this.page === 1) {
        if (i < 4) {
          lines[i].style.display = 'none';
        }
        else {
          lines[i].style.display = 'block';
        }
      }
    }

  }

}

查看：

<div class="solution">

  <!--------------------------------------------------------------------------------------->
  <mat-horizontal-stepper #stepper>
    <mat-step>
      Step 1
    </mat-step>
    <mat-step>
      Step 2
      <input matInput placeholder="Address" required>
    </mat-step>
    <mat-step>
      Step 3
    </mat-step>
    <mat-step>
      Step 4
    </mat-step>
    <mat-step>
      Step 5
    </mat-step>
    <mat-step>
      Step 6
      <input matInput placeholder="Address" required>
    </mat-step>
    <mat-step>
      Step 7
    </mat-step>
    <mat-step>
      Step 8
    </mat-step>
    <!-- one option -->
  </mat-horizontal-stepper>

  <!-- second option -->
  <div>
    <button (click)="goBack()" type="button" [hidden]="step === 0">Back</button>
    <button (click)="goForward()" type="button" [hidden]="step === MAX_STEP">Next</button>
  </div>
  <!--------------------------------------------------------------------------------------->
  Step: {{step}}
  <br>
  Page: {{page}}

</div>

- Sasan

---

非常感谢！请求已经完成： https://github.com/angular/components/issues/12166 但被标记为低优先级 :( - Alejosaur

Answer 2

我最近也在解决类似的问题，参考了https://dev59.com/Erjna4cB1Zd3GeqP81vL#59563396这个答案（作者为Sasan），并尝试编写了一个更通用的代码版本。我添加了一个分页选项，通过考虑要在任何时候显示的步骤的最小和最大索引来实现。其余不在此范围内的步骤，显示为“none”。 带分页的Stepper 你可以参考这里的stackblitz： https://stackblitz.com/edit/angular-mat-stepper-paginator?file=src/app/stepper-paginator1/stepper-paginator1.component.ts

如果您对更详细的解释感兴趣，可以在此处查看我的博客： https://madhura-gore.medium.com/angular-material-stepper-with-pagination-b9e1b091b8f6

- Madhura Gore

Answer 3

我遇到了相同的问题，并找到了一个可滚动列表的解决方案。

通过将.mat-horizontal-stepper-header-container设置为overflow:scroll，并将.mat-horizontal-stepper-header设置为overflow:visbile，您将获得一个非挤压且可滚动的标题栏。下一步（或滚动栏）可以轻松地通过编程完成。

- Seba M