angular - ngOnChanges 未被调用

Question

我正在更新组件属性，但未调用 ngOnChanges。请查看链接的 StackBlitz 以查看重现的问题以及我迄今为止尝试过的所有内容：

https://stackblitz.com/edit/angular-becgjq

编辑：查看代码的正确链接

相关代码

ngOnInit() {
    const testButton1 = document.getElementById('test-button1');
    testButton1.addEventListener('click', function() {
      console.log('about to set this.value');
      console.log(this.value);
      this.value = 'value set by button 1';
    }.bind(this));
    const testButton2 = document.getElementById('test-button2');
    testButton2.addEventListener('click', this.testButtonCallback2(this), false);
    const testButton3 = document.getElementById('test-button3');
    testButton3.addEventListener('click', this.testButtonCallback3.bind(this), false);
  }

  ngOnChanges() {
    console.log('ngOnChanges was called');
  }

  testButtonCallback2(outerThis) {
    return function() {
      console.log('about to set this.value');
      console.log(outerThis.value);
      outerThis.value = 'value is set by callback2';
    }
  }

  testButtonCallback3() {
    console.log('about to set this.value');
    console.log(this.value);
    this.value = 'value is set by callback3';
    this.changeDetectorRef.detectChanges();
  }

标签： angulartypescript

Answer 1

看看官方文档。

Angular 在检测到组件（或指令）的输入属性发生更改时调用其 ngOnChanges() 方法。

您的组件中没有任何输入，因此ngOnChanges永远不会被调用。

此外，您应该实际使用 Angular 提供的方法。我只能建议您按照教程进行操作。例如，您不应在模板中添加事件侦听器 with addEventListenerbut with ，如下所示：(click)

<button (click)="testButtonCallback()">Test Button</button>
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^