如何同时访问Angular Material步进器的MatStepper与ElementRef？

要同时使用MatStepper的组件方法和操作其DOM元素，你需要分别声明两个@ViewChild引用，分别对应组件实例和DOM元素对象，具体实现如下：

1. 模板中保留步进器的模板引用 #

确保你的模板里的<mat-stepper>带有模板引用变量（比如#stepper）：

<mat-stepper #stepper linear>
  <mat-step label="第一步">
    第一步内容
  </mat-step>
  <mat-step label="第二步">
    第二步内容
  </mat-step>
</mat-stepper>

<button (click)="handleStepper()">操作步进器</button>

2. 组件类中声明两个ViewChild引用 #

在组件类里分别定义两个变量，一个获取MatStepper实例，另一个通过{read: ElementRef}获取对应的DOM元素：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 获取MatStepper实例，用于调用组件自带的方法和属性（如next()、previous()、selectedIndex等）
  @ViewChild('stepper')
  stepper: MatStepper;

  // 获取步进器的DOM元素引用，用于直接操作DOM
  @ViewChild('stepper', { read: ElementRef })
  stepperElement: ElementRef<HTMLElement>;

  handleStepper() {
    // 使用MatStepper的组件方法
    this.stepper.next();

    // 操作DOM元素
    const nativeEl = this.stepperElement.nativeElement;
    // 示例：修改样式
    nativeEl.style.border = '1px solid #ccc';
  }
}

注意事项 #

• 不要直接访问MatStepper实例的私有属性_elementRef，这属于Angular Material的内部实现细节，版本迭代后可能会失效，官方不推荐这种做法。
• 两个@ViewChild都指向同一个模板引用变量#stepper，但通过read选项指定了不同的获取类型，这样就能同时拿到组件实例和DOM元素。

内容的提问来源于stack exchange，提问作者Onno van der Zee