Angular中Property Binding无法触发，如何监听completed属性变更？

问题原因 #

Angular Material的mat-step组件的(completed)输出事件，并不是用来响应你通过属性绑定设置的[completed]值变化的。这个事件只会在组件内部标记步骤为完成状态时触发，外部通过变量修改绑定值的操作不会触发它，所以你当前的写法无法调用onChange()。

解决方案 #

方案1：修改值时直接执行逻辑 #

既然是通过点击按钮修改comp，最简单的方式就是在设置comp的同时直接执行跳转，不用依赖事件：

test() {
  this.comp = true;
  this.myStepper?.next(); // 直接在这里执行跳转逻辑
}

模板里可以删掉(completed)="onChange()"，不需要再绑定这个事件。

方案2：用属性setter监听comp的变化 #

如果comp可能在多个地方被修改，不想重复写跳转逻辑，可以给comp加个setter，监听值的变化：

private _comp = false;
get comp(): boolean {
  return this._comp;
}
set comp(value: boolean) {
  this._comp = value;
  // 当值变为true时触发跳转
  if (value) {
    this.myStepper?.next();
  }
}

test() {
  this.comp = true;
}

模板保持[completed]="comp"即可，不需要绑定(completed)事件。

方案3：用ngOnChanges钩子监听属性变化 #

如果comp是通过@Input从父组件传入的（当前示例不是，但如果有这种场景），可以用ngOnChanges检测变化：

import { Component, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
// ...
export class MatStepperComponent implements OnChanges {
  comp: boolean = false;

  ngOnChanges(changes: SimpleChanges) {
    // 检测comp属性的变化，且新值为true时执行跳转
    if (changes['comp'] && changes['comp'].currentValue) {
      this.myStepper?.next();
    }
  }

  // ...
}

最终代码示例（方案2） #

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

@Component({
  selector: 'app-mat-stepper',
  styleUrls: ['./mat-stepper.component.css'],
  template: `<div class="mat-card-div">
  <mat-vertical-stepper #mystepper [linear]=true>
    <mat-step [completed]="comp">
      <ng-template matStepLabel>Test1</ng-template>
      test 1
    </mat-step>

    <mat-step>
      test 2
      <ng-template matStepLabel>Test2</ng-template>
    </mat-step>
  </mat-vertical-stepper>
  <button (click)="test()">test</button>
</div>`
})
export class MatStepperComponent {
  @ViewChild('mystepper') myStepper!: MatStepper|undefined;
  
  private _comp = false;
  get comp(): boolean {
    return this._comp;
  }
  set comp(value: boolean) {
    this._comp = value;
    if (value) {
      this.myStepper?.next();
    }
  }

  constructor() {
  }

  test()
  {
      this.comp=true;
  } 
}

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