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

【问题标题】：How to detect change with same value @Input() in Angular?如何在Angular中检测具有相同值@Input()的变化？
【发布时间】：2021-10-02 22:55:58
【问题描述】：

我有一个带有 @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
        );
    }
}

【问题讨论】：

角度变化检测仅在输入值被地址改变时起作用，它是预期的，对于相同的值，它可以不考虑。这是一个有效的用例吗？检测相同输入的变化？认为角度变化检测在树中从上到下进行，如果您一直要求对相同值进行变化检测，角度需要运行那些不必要的变化检测，从长远来看会导致性能问题。
您使用哪种变更检测策略？默认情况下，仅当值发生更改并且 angular 运行从根到其所有子级的更改时才重要，前提是组件中发生了某些更改。在 Push 上，仅当我们将新引用传递给数据绑定的 Input 属性时才有效。您应该检查this 链接，因为了解更改检测很重要。

标签： angular typescript angular-input

【解决方案1】：

您还可以使用“技巧”，将对象 {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}
}

【讨论】：

【解决方案2】：

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

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

如果您将相同的值设置两次，则根据值的类型，此解决方案有效或只会触发一次。

如果myProperty的类型是字符串，数字，...那么它只会被触发一次
如果类型复杂，则解决方案有效。

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

【讨论】：

当值没有变化时它是否检测到变化？正如文档所说，当指令的任何数据绑定属性更改时调用的生命周期钩子。定义一个 ngOnChanges() 方法来处理更改。
@AbhinavKumar 取决于：如果属性类型很简单（即字符串、数字等），那么它将不起作用。否则是的。我将使用该信息更新答案