javascript - 模板变量始终未定义 ngOnChanges

Question

我有一个子组件，在其父组件中使用了两次，它使用 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
}

Answer 1

您可以使用 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 这在这种情况下很有用。

希望我的回答对您有所帮助。快乐编码!