angular - 如何检测 Angular 中属性的更改

Question

我有一个带有子组件时间轴的组件。

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

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

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

如何检查时间轴组件中的 editing 属性何时发生更改？我需要在编辑值发生变化时发出它。

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

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

或者还有其他方法吗？

Answer 1

ngOnChanges 正好可以用于此目的

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

export class TimelineComponent implements OnChanges

然后像这样实现 ngOnChanges 方法

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

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

对于原始值，任何更改都会触发。对于引用值，您需要更改实际引用，仅更改输入中对象的属性是行不通的。