Angular 的 setter 和 getter

Question

在 Angular 中，有一个内置的动作对话框框架，当 showDialog = true 时，我必须使用它来显示动作弹出窗口。

当 showDialog=true 时会显示动作对话框， 否则当 showDialog=false 时操作对话框将隐藏

当showDialog = false时，必须使用setter和getter方法调用cancel方法。

但是，在调试代码时，即使我没有触发操作对话框，它也会继续检查 getter 和 setter 方法。

有没有一种方法可以在 Angular 中使用生命周期方法来比较 showDialog 的先前值和当前布尔值。示例：如果 previousValue.showDialog != currentValue.showDialog，则只调用 get showDialog()、set showDialog() 和 cancel()。

我正在考虑在 Angular 中使用一些生命周期方法，例如 ngAfterViewInit()。你知道我如何存储以前的 showDialog 布尔值，以便我可以与 showDialog 的当前值进行比较。

在 React 中，我可以使用具有 prev props 值的 getDerivedStateFromProps，但你知道 Angular 中是否有类似的方法。

a.html

   <action-dialog [(openDialog)]="showDialog"/>

b.html

      <button (click)="showDialog = true">
                    {{intl.cleanNow | uppercase}}
      </button>

a.ts

  get showDialog() {
      return this._showDialog;
   }

  set showDialog(val){
    if (val === false) {
        this.cancel();
    } else if (val === true) {
        this._showDialog = true;
    }
}

 cancel() { 
    this.showDialog = false;
    this.form.reset({
        throttle: this._originalThrottle || 50
    });
}

Answer 1

您可以使用 ngOnChanges 生命周期挂钩。这个生命周期钩子获取一个 simpleChanges 类型的变量，其中一个值是先前的值。

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnChanges {
  @Input() test: string;
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }

  ngOnInit() { }
}

这是你从父组件调用这个组件的方式：

<app-test [test]="'2'"></app-test>

这将是控制台：

测试：SimpleChange，currentValue：“2”，firstChange：true，previousValue： 未定义

因此您可以知道当前值、之前的值以及是否是第一次更改