Javascript 检测角度4中组件的变化

我在一个组件中工作，我需要检测组件内部是否有任何变化，或者变量是否有变化。。。问题是基于这个，我会做点什么。。。可能吗

例如，这是我的代码：

 public var1: boolean;

 public var2: string

这是我的HTML

<component-boolean [(ngModel)]="var1"></component-boolean>
<component-string[(ngModel)]="var2"></component-string>

所以我需要在我的组件内部检测，根据所有变量的值已经发生了变化

---

当然，我需要它是动态的，不必为每个变量声明更改检测，因为我不知道变量的数量。

如果组件内部发生更改，则必须输出事件：

@Output() booleanChanges: EventEmitter<string> = new EventEmitter();

然后您可以像这样更改HTML：

this.booleanChanges.next(whatever);

<component-boolean [booleanChanges]="var1"></component-boolean>

---

您希望使用

@Input

和

@Output

进行双向绑定。通过

@Input

数据流向子级，而

@Output

则向父级发出事件

我们可以创建一个结合这两者的双向绑定，其中

@Output

变量与

@Input

变量具有相同的名称+后缀

Change

（重要！）

因此，请使用以下标记标记您的子标记：

<component-boolean [(bool)]="var1"></component-boolean>
<component-string [(str)]="var2"></component-string>

当您对该值进行更改时，只需发出该更改，父级就会捕获它

this.bool = true;
this.boolChange.emit(this.bool)

以类似的方式为其他组件实现此功能

如果不需要双向绑定，可以为

@Output

和触发器事件使用不同的名称：

@Output() boolHasChanged = new EventEmitter<boolean>();

this.boolHasChanged.emit(this.bool)

@Output() boolHasChanged = new EventEmitter<boolean>();

this.boolHasChanged.emit(this.bool)

<component-boolean [bool]="var1" 
                   (boolHasChanged)="boolHasChanged($event)">
</component-boolean>

boolHasChanged(bool: boolean) {
  console.log(bool)
}