如何检测Angular中属性的更改答案

【问题标题】：How to detect change to a property in Angular如何检测Angular中属性的更改
【发布时间】：2019-06-13 11:25:18
【问题描述】：

我有一个带有子组件timeline的组件。

<app-timeline [(editing)]="editingDate"></app-timeline>

在时间轴组件中，我有以下属性：

@Input() editing: boolean; // <--- detect change on this
@Output() editingChange = new EventEmitter();

如何检查时间轴组件何时更改了 editing 属性？每当编辑值发生变化时，我都需要发出它。

我应该对编辑属性使用 setter，然后从那里发出吗？

private _editing
set editing() { ... // emit }

或者还有其他方法吗？

【问题讨论】：

参考：onChanges 方法，angular.io/api/core/OnChanges，这可以让你知道哪个属性被改变了。
How to detect when an @Input() value changes in Angular?的可能重复
我正在尝试通过 2 个组件从一个组件发送数据，使用服务会更好还是应该通过 2 个组件发出？
做服务是更好的选择。

标签： angular

【解决方案1】：

我认为您不需要双向绑定（这取决于您和要求）

只需使用属性绑定...

<app-timeline [editing]="editingDate"></app-timeline>

每当editing 设置时，您必须发出Output()

@Output() editingChange = new EventEmitter();

public get editing(): boolean {
   return this._editing;
}

@Input()
public set editing(edit: boolean) {
    if (edit) {
        this._editing = edit;
        this.editingChange.emit("something");
    }
}

【讨论】：

【解决方案2】：

ngOnChanges 可以完全用于此

首先确保你的组件像这样实现 ngOnChanges

export class TimelineComponent implements OnChanges

然后像这样实现ngOnChanges方法

ngOnChanges(changes: SimpleChanges) {
    if (changes.editing) {
        console.log(changes.editing.currentValue);
    }
}

任何时候任何输入被改变都会进入 ngOnChanges 方法。这也是添加 if 语句的原因，因为如果更改了任何其他输入，editing 属性将不存在于 changes 对象上。

对于原始值，它会在任何更改时触发。对于参考值，您需要更改实际参考，仅更改输入中对象的属性是行不通的。

【讨论】：