检测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进行双向绑定。当@Input数据流向子节点时，@Output将事件发送给父节点。

我们可以创建一个双向绑定组合这两个，其中@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)

以与您的其他组件类似的方式实现此目的。

如果您不想要双向绑定，可以为@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)
}

Answer 2

如果组件内部发生了某些变化，您必须输出一个事件：

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

如果有什么变化就会发出类似的事件：

this.booleanChanges.next(whatever);

然后你可以改变你的HTML：

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