Question

我有一个@Input，当它为true时会执行某些操作ngOnChange不会检测为false时

@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不会以这种方式触发。 ngOnChanges仅在组件的输入从外部更改时运行。也就是说，假设您有

<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()这样的函数，并且表格每次都会填充。

Answer 2

ngOnChanges仅在输入更改来自模板绑定（如<component [someInput]="value">）时运行。如果您像component.someInput = value这样手动进行设置，则该操作会在更改检测周期之外发生，您需要让Angular知道您已进行了某些更改。

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


constructor(private cd: ChangeDetectorRef) {}

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

希望它可以帮助您澄清疑问！

当我在Input中设置值时，ngOnChange不会检测到更改

2 个答案: