当我在输入中设置值时，ngOnChange 没有检测到变化

Question

我有一个 @Input，当它为真时它会执行某些操作 ngOnChange 在它为假时不会检测到

@Input() viewMode: boolean;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.viewMode.currentValue !== undefined) {    
      if (changes.viewMode.currentValue ) {
        this.populateForm(this._event);
      }else{
        this.doSomething()
      }
    }
  }


setValue(){

   this.viewMode = false; 
}

当我调用 setValue 函数时它不会落入 ngOnChange

Answer 1

ngOnChanges 仅在输入更改来自 <component [someInput]="value"> 等模板绑定时运行。如果你像这样手动设置它 component.someInput = value，那会发生在变化检测周期之外，你需要让 Angular 以某种方式知道你已经改变了一些东西。

如果您仍希望触发 ngOnChanges，则必须手动执行。即


constructor(private cd: ChangeDetectorRef) {}

setValue(){
  this.viewMode = false; 
  this.cd.detectChanges();
}

希望对您有所帮助，解开您的疑惑！

Answer 2

几天前我自己也有这个疑问。我发现 - ngOnChanges 不会以这种方式触发。当组件的输入从外部更改时，ngOnChanges 仅运行s。即假设你有，

<app-selector [editMode]="true"></app-selector>

这变成了，

<app-selector [editMode]="false"></app-selector>

现在只有 angular 会运行 ngOnchanges。如果你想在这个变量的属性发生变化时做一些事情，你应该像这样使用 setter 和 getter 作为这个变量，


private _viewMode: boolean;

@Input() set viewMode(mode) {
  this._viewMode = mode;
  this.populateForm(this._event);
}

get viewMode() {
  return this._viewMode;
}

现在您可以像 this.setValue() 那样调用您的函数，您的表单每次都会填充。

当我在输入中设置值时，ngOnChange 没有检测到变化

ngOnChange dont detect change when i set value in Input

angular

angular-input