javascript - 检测 Angular 4 中组件的变化

Question

我在一个组件中工作，我需要检测组件内部是否有任何变化，或者变量是否发生了变化……事情是基于此，我会做一些事情……是可能吗？

例如，这是我的代码:

 public var1: boolean;

 public var2: string

这是我的 HTML

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

所以我需要检测我的组件内部，是否已经根据所有变量的值进行了更改。

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

Answer 1

您需要使用 @Input 和 @Output 进行双向绑定(bind)。使用 @Input 数据流向子级，而 @Output 将事件发送给父级。

我们可以创建一个结合这两者的双向绑定(bind)，其中 @Output 变量与 @Input 变量同名 + 后缀 Change (重要!)

所以标记你的子标签:

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

在你的component-boolean中:

@Input() bool: boolean;
@Output() boolChange = new EventEmitter<boolean>();

当您更改此值时，只需发出该更改，父级就会捕获它!

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

以类似的方式为您的其他组件实现此操作。

如果你不想要双向绑定(bind)，你可以为 @Output 和触发事件取一个不同的名字:

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

this.boolHasChanged.emit(this.bool)

子标签:

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

和父 TS:

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