如何检测对 Angular 中属性的更改

Question

我有一个带有子组件的组件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 }

或者还有其他方法吗？

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对象上将不存在该属性。

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

Answer 2

ngOnChanges查找组件生命周期中的每个更改。使用它有点矫枉过正。

您不需要双向绑定（同样取决于您和要求）

只需使用属性绑定即可...

<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");
    }
}