在@ViewChild上使用setter的Angular 4 [英] Angular 4 using setter on @ViewChild

问题描述

我有一个演示此处

我正在尝试使用* ngIf

I'm trying to get the height of an element after it is added to the DOM with *ngIf

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

I'm trying to do this by using a setter on the @ViewChild, the setter should be called one the *ngIf becomes true.

在我的示例中，只有在添加元素然后将其删除(单击按钮两次)后，它才似乎起作用.

In my example it only seems to work when the element has been added then removed (button is clicked twice).

当元素显示为firsy时，如何使它工作?

How can I get this to work when the element is firsy shown.

我知道我可以使用[hidden]而不是* ngIf来执行此操作，但是我的实际代码中有很多我不想立即放入DOM中的元素

I know I can do this with [hidden] instead of *ngIf but my actual code has a lot of elements that I dont want to put in the DOM at once

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);
  }

}

推荐答案

它只能第二次起作用的原因是，this.showThree = !this.showThree不会立即调用设置器，因为整个函数先完成，然后才实际检测到角度进行更改并将元素放置到位.如果将高度读取逻辑移到设置器中，它将起作用.

The reason it only works second time is, that the this.showThree = !this.showThree does not call the setter right away, because whole function finishes first, only then angular actually detects the changes and puts the element in place. It will work if you move the height reading logic into the setter.

这意味着您无法在showBlockThree函数中读取blockHeightThree，因为第三个块根本不存在.但是有一个微妙的解决方案.您可以将setTimeout()放在此处，以免读取高度.也许它将满足您的需求.

That means you cannot read blockHeightThree in the showBlockThree function, because the block three simply is not there yet. But there is an inelegant solution to that. You can put setTimeout() there so the height is read asnychronously. Maybe it would do what you need.

工作演示

    @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));
    }

这篇关于在@ViewChild上使用setter的Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！