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

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

只需使用属性绑定...

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

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

2 个答案: