如何解决如何在Angular中检测具有相同值@Input()的变化?
我有一个带有 @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
);
}
}
解决方法
您也可以使用“技巧”,将对象 {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}
}
,
使用接口 OnChanges 扩展您的组件并实现 ngOnChanges 方法:
ngOnChanges(changes: SimpleChanges) {
if(changes['myProperty']) {
// myProperty has changed
}
}
如果您设置相同的值两次,则根据值的类型,此解决方案有效或仅触发一次。
- 如果 myProperty 的类型是 string、number、... 那么它只会被触发一次
- 如果类型复杂,则解决方案有效。
请参阅以下示例的控制台输出:https://stackblitz.com/edit/angular-ivy-rd8szx
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。