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();
  }

Answer 1

看看官方的文档。

当它检测到组件(或指令)的输入属性发生变化时，角调用它的ngOnChanges()方法。

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

此外，您应该实际使用角提供的方法。我只能建议你跟随教程。例如，不应该使用addEventListener添加事件侦听器，而应该在模板中添加(click)，如下所示：

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