Angular 4 在@ViewChild 上使用setter

Question

我有一个演示 here

我试图在使用 *ngIf 将元素添加到 DOM 后获取元素的高度

我正在尝试通过在 @ViewChild 上使用一个 setter 来做到这一点，这个 setter 应该在 *ngIf 变为 true 时被调用。

在我的示例中，它似乎只在元素被添加然后被删除时才起作用(按钮被点击两次)。

当元素第一次显示时，我怎样才能让它工作。

我知道我可以用 [hidden] 而不是 *ngIf 来做到这一点，但我的实际代码有很多我不想立即放入 DOM 的元素

import { Component, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})

export class ChildComponent{

  @Input() parent: ElementRef;

  private blockThree: ElementRef;

  @ViewChild('blockThree') set content(content: ElementRef) {
    this.blockThree = content;
  }

  showThree: boolean = false

  blockHeightThree: number

  constructor(){ }


  showBlockThree(){
    this.showThree = !this.showThree
    this.blockHeightThree = this.blockThree.nativeElement.clientHeight;
    console.log('element height '+this.blockHeightThree);
  }

}

Answer 1

它只在第二次起作用的原因是，this.showThree = !this.showThree 没有立即调用 setter，因为整个函数先完成，然后 Angular 才真正检测到变化并将元素放置到位。如果您将高度读取逻辑移动到 setter 中，它将起作用。

这意味着您无法在 showBlockThree 函数中读取 blockHeightThree，因为 block 三还不存在。但是有一个不优雅的解决方案。您可以将 setTimeout() 放在那里，以便同步读取高度。也许它会满足您的需求。

Working Demo

    @ViewChild('blockThree') set content(content: ElementRef) {
      console.log("block three", content)
      this.blockThree = content;
      if (this.blockThree) {            
        this.blockHeightThree = this.blockThree.nativeElement.clientHeight;
        console.log(this.blockThree.nativeElement.clientHeight);
       }
    }

    showBlockThree() {
      this.showThree = !this.showThree
      console.log('element height ' + this.blockHeightThree);
      setTimeout(()=> console.log("async block three", this.blockHeightThree));
    }