Question

我有一个演示here

我试图在使用* ngIf

将元素添加到DOM后获取元素的高度

我试图通过在@ViewChild上使用setter来实现这一点，应该调用setter，* ngIf变为true。

在我的例子中，只有当元素被添加然后被移除（按钮被点击两次）时才会起作用。

当元素显示时，我怎样才能使它工作。

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

<canvas id="canvas"></canvas>

Answer 1

它只能第二次工作的原因是this.showThree = !this.showThree没有立即调用setter，因为整个函数首先完成，只有angular实际上检测到了变化并将元素放在适当的位置。如果将高度读取逻辑移动到设置器中，它将起作用。

这意味着您无法在blockHeightThree函数中阅读showBlockThree，因为块3尚未存在。但是有一个不优雅的解决方案。您可以将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));
    }

Angular 4在@ViewChild上使用setter

1 个答案: