模板变量始终未定义 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

您可以使用 来ngOnChanges检测更改，而不是使用setter.

这是你需要做的

@Input()
set myUpdatingVar(value: any) {
   if(value) {
        this.myFunc(value);
   }
}

它不仅会在初始化视图时加载，而且每当 Angular 中发生更改时myUpdatingVar，Angular 都会运行 setter 并执行您的函数。此外，ngOnChanges它是一个昂贵的生命周期钩子。如果您不小心使用它，每次组件中发生更改时它都会运行。

但如果您想使用ngOnChanges，则应该使用它在变量中检测到的更改，而不是使用变量本身。

这是例子

ngOnChanges(changes: SimpleChanges): void {
  if (changes.myUpdatingVar.currentValue === someValue) {
      this.myFunc(changes.myUpdatingVar.currentValue);
   } else {
      this.myFunc(changes.myUpdatingVar.currentValue);
   }
}

您可以检查它是否是第一个更改，也可以获取currentValueandpreviousValue哪个在这种情况下有用。

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