角材料步进器“分页”

Posted 2023-05-07

【中文标题】角材料步进器“分页”

【英文标题】：Angular Material Stepper 'Paginate'

【发布时间】：2020-04-19 09:03:42

【问题描述】：

我的步进器中有很多步骤，所以我想把它分成两部分，即

当用户进入向导时，步进器标题仅显示 1--2--3--4，然后，当第 4 步完成，用户进入第 5 步时，标题显示 5--6-- 7--8，以此类推进行下一步。

你知道有什么办法吗？

提前致谢。

编辑：

我尝试使用*ngIf 隐藏/取消隐藏步骤，但它确实从步进器数组中删除了这些步骤，因此当步骤隐藏时输入的信息会丢失。

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

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

【问题讨论】：

你觉得有两个步进器而不是一个，都有 4 个步骤？

尝试使用display:none而不是ngIf隐藏它们

【参考方案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>

【讨论】：

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

【参考方案2】：

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

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

【参考方案3】：

我最近正在研究类似的问题，并通过Sasan 的这个答案https://***.com/a/59563396/14256240 的一些参考，我尝试编写更通用的代码版本。通过考虑我们要随时显示的步骤的最小和最大索引，我在步进器中添加了一个分页选项。不在此范围内的其余步骤显示为“无”。

Stepper With Pagination

您可以在这里参考 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