检测Angular 4中组件的变化答案

【问题标题】：Detect changes of components in Angular 4检测Angular 4中组件的变化
【发布时间】：2018-05-14 09:59:16
【问题描述】：

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

例如，这是我的代码：

 public var1: boolean;

 public var2: string

这是我的 HTML

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

所以我需要检测我的组件内部，是否根据所有变量的值发生了变化。

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

【问题讨论】：

【解决方案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)
}

【讨论】：

【解决方案2】：

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

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

如果发生变化，只需发出这样的事件：

this.booleanChanges.next(whatever);

然后你可以像这样改变你的 HTML：

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

【讨论】：