如何检测Angular中属性的更改

Question

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

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

在时间轴组件中，我有这些属性：

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

如何检查何时从时间轴组件对编辑属性进行更改？每当编辑值发生更改时，我都需要发出该值。

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

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

或者有其他方法吗？

Answer 1

我不认为你需要双向绑定（同样，这取决于你和要求）

只需使用属性绑定代替…

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

每当< code>editing设置时，您必须发出< code>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");
    }
}

Answer 2

ngOnChanges可用于此目的

首先确保您的组件实现了这样的 ngOn 更改

export class TimelineComponent implements OnChanges

然后像这样实现ngOnChange方法

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

任何输入更改时，都将进入ngOnChanges方法。这也是添加if语句的原因，因为如果更改了任何其他输入，编辑属性将不存在于changesobject上。

对于原始值，它将在任何变化时触发。对于引用值，您需要更改实际的引用，仅仅更改输入中对象的属性是不行的。