角度计算的元素高度不正确

Question

我在组件中使用此代码.html在单击时隐藏子元素元素：

<grandparentcomponent <--wraps everything, the height I need-->
      //more divs
      <div class="dropIcon align-middle fa" (click)="toggleEffects()"></div>
      <div class="dropdown" [hidden]="effectsHidden">
         //more divs
      </div>
</grandparentcomponent>

在 component.ts 中，我正在处理一个指令 appPanelHeight 并在 toggleEffects（） 函数中发出祖父组件的高度：

  toggleEffects() {
    this.effectsHidden = !this.effectsHidden;
    this.heightService.height.next(this.appPanelHeight.height);
  }

自定义指令代码：

export class PanelHeightDirective {
  constructor(private elementRef:ElementRef) {    
   }
     get height() {
     return this.elementRef.nativeElement.offsetHeight;
   }
}

问题是我发出的高度不是当前的高度，而是那个在effectsHidden改变之前。为了进一步解释这个问题..如果我将 Subject.next（） 调用包装到 setTimeout 中，我确实会得到正确的高度：

  toggleEffects() {
    this.effectsHidden = !this.effectsHidden;
    setTimeout(() => {
      this.heightService.height.next(this.appPanelHeight.height);
    }, 1);
  }

如果我使用 jQuery 获取父组件高度，也会发生同样的问题。这是怎么回事？为什么我需要使用 setTimeout？我觉得这是不好的做法，它会导致进一步的问题。

Answer 1

在读取高度之前显式调用更改检测，以确保 Angular 已更新视图绑定：

constructor(private cdRef:ChangeDetectorRef) {}
toggleEffects() {
  this.effectsHidden = !this.effectsHidden;
  this.cdRef.detectChanges();
  this.heightService.height.next(this.appPanelHeight.height);
}