如何在Angular中檢測具有相同值@Input()的變化？

Question

我有一個帶有@Input()的 Angular 自定義滾動指令，我在其中傳遞一個 HTML 元素作為參數，以將滾動條移動到該特定的 HTML 元素。

使用這種方法，如果我多次傳遞相同的 HTML 元素，則 Input 檢測僅在第一次發生變化之后才檢測到任何變化。

有沒有辦法強制 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}
}