如何检测 Angular 中具有相同值 @Input() 的变化？

Question

我有一个带有 @Input() 的 Angular 自定义滚动指令，我在其中传递一个 HTML 元素作为参数以将滚动条移动到该特定 HTML 元素.

使用这种方法，如果我多次传递相同的 HTML 元素，输入检测仅在第一次发生变化后检测不到任何变化。

有没有办法强制Angular检测相同输入的变化？

@Input() set elementToScroll(element: HTMLElement) {
    if (element != undefined) {
        console.log(element); // Detecting first time only for same input
        this._osInstance?.scroll(
            { el: element, block: { y: 'begin' } },
            500
        );
    }
}

Answer 1

使用 OnChanges 接口扩展您的组件并实现 ngOnChanges 方法：

ngOnChanges(changes: SimpleChanges) {
    if(changes['myProperty']) {
        // myProperty has changed
   }
}

如果您两次设置相同的值，那么根据值的类型，此解决方案有效或仅被触发一次。

如果myProperty的类型是string,number,...那么只会触发一次
如果类型复杂，则解决方案有效。

查看以下示例的控制台输出：https://stackblitz.com/edit/angular-ivy-rd8szx

Answer 2

您还可以使用“技巧”，将一个对象传递给您的输入 {element:element}

@Input() set elementToScroll(element:{element:HTMLElement}) {
    //use element.element
    if (element.element != undefined) {
        console.log(element.element); 
        this._osInstance?.scroll(
            { el: element.element, block: { y: 'begin' } },
            500
        );
    }
}

//in your parent you has some like:

@ViewChild('move') myElement:ElementRef
click(){
   this.parameter={element:myElement.nativeElement}
}

如何检测 Angular 中具有相同值 @Input() 的变化？

How to detect change with same value @Input() in Angular?

typescript

angular

angular-input