Question

我在component.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);
}

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

1 个答案: