javascript - Angular 双向数据绑定(bind)和监视父组件的变化

Question

使用双向数据绑定(bind)时，似乎没有办法观察父组件的变化。

我有一个用于收集标签列表的自定义输入组件。双向数据绑定(bind)已设置并在此组件与其父组件之间工作。

// the parent component is just a form
// here is how I'm adding the child component
<input-tags formControlName="skillField" [(tags)]='skillTags' (ngModelChange)="skillTagUpdate($event)">
</input-tags>

在父组件中如何观察绑定(bind)变量的变化？虽然它始终是最新的(我已经确认了这一点)，但我找不到任何关于对变化使用react的指导。

我试过:

ngOnChanges(changes: SimpleChanges) {
    if (changes['skillTags']) {
        console.log(this.skillTags);  // nothing
    }
}

和

skillTagUpdate(event){
    console.log(event); // nothing
}

更新:TWDB 恕我直言，并不是它所宣传的那样。每当我到达 TWDB 似乎是一个解决方案的地方时，我都会重新设计服务和/或可观察通信。

Answer 1

当您实现自己的双向绑定(bind)时，您必须实现一个事件发射器。其语法是强制性的。

这意味着您有一个钩子(Hook)可以监听值是否发生变化。

这是一个演示:

<hello [(name)]="name" (nameChange)="doSomething()"></hello>

_name: string;
@Output() nameChange = new EventEmitter();

set name(val) {
  this._name = val;
  this.nameChange.emit(this._name);
}

@Input()
get name() {
  return this._name;
}

counter = 0;

ngOnInit() {
  setInterval(() => {
    this.name = this.name + ', ' + this.counter++;
  }, 1000);
}

Stackblitz

据我所知，这似乎是一种不那么烦人的使用方式，无论如何，任何两种方式的绑定(bind)都将遵循相同的规则，即它以 Change 单词结尾!