我有一个子组件,在其父组件中使用了两次,它使用 ngOnChaages 来更新值;
这一切都工作正常,但现在我正在尝试根据通过 @Input
变量传递的信息在子级中操作模板。
我发现的是;当父组件首次加载时,模板变量在函数调用中未定义
这是有道理的,因为该函数是在 onChanges
方法中调用的,并且没有给模板足够的时间来加载。
我需要重构我的代码,但是如何重构?
目前,如果我使用 setTimeout
,它就可以工作
简单来说:
@ViewChild('myContainer', {read: ElementRef}) myContainer: ElementRef;
@Input() myUpdatingVar
ngOnChanges(): void {
if (this.myUpdatingVar === someValue) {
this.myFunc(this.someValue1);
} else {
this.myFunc(this.someValue2);
}
}
myFunc(param){
do stuff....
this.updateDom(anotherParam);
}
updateDom(param) {
// If I use setTimeout this works
this.myContainer.nativeElement.querySelector(`#someId`); // Undefined
}
最佳答案
您可以使用 setter
来检测更改,而不是使用 ngOnChanges
。
这是您需要做的
@Input()
set myUpdatingVar(value: any) {
if(value) {
this.myFunc(value);
}
}
它不仅会在初始化 View 时加载,而且每当 myUpdatingVar
中发生更改时,Angular 都会运行 setter 并执行您的函数。此外,ngOnChanges 是一个昂贵的生命周期 Hook 。如果您不小心使用它,每次组件中发生更改时它都会运行。
但是如果您想使用 ngOnChanges
,您应该使用它在变量中检测到的更改,而不是使用变量本身。
这是示例
ngOnChanges(changes: SimpleChanges): void {
if (changes.myUpdatingVar.currentValue === someValue) {
this.myFunc(changes.myUpdatingVar.currentValue);
} else {
this.myFunc(changes.myUpdatingVar.currentValue);
}
}
您可以检查这是否是第一次更改,还可以获取 currentValue
和 previousValue
这在这种情况下很有用。
希望我的回答对您有所帮助。 快乐编码!
关于javascript - 模板变量始终未定义 ngOnChanges,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56047684/