Angular Material：如何在stepper的selectionChange事件中获取mat-step内容

嘿，我来帮你搞定这个需求！要在Angular Material Stepper的selectionChange事件触发时，获取选中mat-step里的内部内容（比如自定义组件、文本元素），这里有几个实用的方法：

方法1：直接通过事件对象获取选中Step的DOM元素 #

StepperSelectionEvent里的selectedStep属性就是当前选中的MatStep实例，你可以通过它的内部_elementRef属性访问对应的DOM节点，进而查询内部内容：

修改你的TS代码如下：

handleSelectionChange(event: StepperSelectionEvent){
  // 获取选中的MatStep实例
  const selectedStep = event.selectedStep;
  // 获取Step对应的DOM元素
  const stepDom = selectedStep._elementRef.nativeElement;

  // 示例1：查找内部的<app-form>组件DOM
  const appFormDom = stepDom.querySelector('app-form');
  // 示例2：获取Step内的所有文本内容
  const stepText = stepDom.textContent.trim();
  // 示例3：查找特定的p标签
  const testPara = stepDom.querySelector('p');

  console.log('选中Step的DOM:', stepDom);
  console.log('找到的app-form组件:', appFormDom);
  console.log('Step文本内容:', stepText);
}

注意：_elementRef是Angular的内部属性（带下划线前缀），虽然在绝大多数Angular Material版本中都稳定可用，但如果后续框架版本更新有变动，可能需要调整，不过目前来说是最直接的方案。

方法2：通过ViewChildren获取所有Step实例，匹配选中项 #

如果你不想依赖内部属性，可以先通过ViewChildren获取页面上所有的MatStep实例，再在事件中匹配选中的那一个：

首先在组件中添加ViewChildren装饰器：

import { ViewChildren, QueryList } from '@angular/core';
import { MatStep } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {
  @ViewChildren(MatStep) steps!: QueryList<MatStep>;

  constructor() { }

  ngOnInit(): void {
  }

  handleSelectionChange(event: StepperSelectionEvent){
    // 从所有Step中找到当前选中的实例
    const targetStep = this.steps.find(step => step === event.selectedStep);
    if(targetStep){
      const stepDom = targetStep._elementRef.nativeElement;
      // 后续操作和方法1一致，比如查找内部组件
      const reactiveFormDom = stepDom.querySelector('reactive-form');
      console.log('Step2的reactive-form组件:', reactiveFormDom);
    }
  }
}

方法3：获取内部组件的实例（用于调用方法/访问属性） #

如果你需要的不只是DOM元素，而是要拿到<app-form>这类自定义组件的实例，来调用它的方法或者访问属性，可以结合ViewChildren和DOM的包含关系来匹配：

首先导入你的自定义组件，并添加ViewChildren：

import { ViewChildren, QueryList } from '@angular/core';
import { AppFormComponent } from '../app-form/app-form.component';
import { ReactiveFormComponent } from '../reactive-form/reactive-form.component';

// ...

@Component({
  // ...
})
export class StepperComponent implements OnInit {
  @ViewChildren(AppFormComponent) appFormList!: QueryList<AppFormComponent>;
  @ViewChildren(ReactiveFormComponent) reactiveFormList!: QueryList<ReactiveFormComponent>;

  // ...

  handleSelectionChange(event: StepperSelectionEvent){
    const stepDom = event.selectedStep._elementRef.nativeElement;

    // 找到当前Step对应的AppFormComponent实例
    const currentAppForm = this.appFormList.find(form => {
      return stepDom.contains(form._elementRef.nativeElement);
    });

    // 找到当前Step对应的ReactiveFormComponent实例
    const currentReactiveForm = this.reactiveFormList.find(form => {
      return stepDom.contains(form._elementRef.nativeElement);
    });

    if(currentAppForm){
      // 调用组件的方法或访问属性
      console.log('当前Step的AppForm实例:', currentAppForm);
      // 比如 currentAppForm.submitForm();
    }

    if(currentReactiveForm){
      console.log('当前Step的ReactiveForm实例:', currentReactiveForm);
    }
  }
}

额外提示 #

• 确保你的自定义组件（如AppFormComponent）已经在当前组件所属的模块中声明或导入（如果是独立组件的话）。
• 因为selectionChange事件触发时，选中的Step内容已经完成渲染，所以不用担心获取不到元素的问题。

内容的提问来源于stack exchange，提问作者Shakir