如何正确地等待元素获得正确的宽度，然后在Angular 2中访问它

How to correctly wait for the elements to get their correct width before accessing it in Angular 2?

本文关键字：然后 Angular 访问 等待 正确地 元素      更新时间：2024-03-30

我试图使按钮具有相同的宽度，但在访问按钮宽度之前，我在等待Angular 2完成所有渲染和其他操作时遇到了问题。

我尝试使用"有效"的DoCheck，我所说的"有效"是指它确实获得了正确的宽度值，但这只是第二次运行时。

由于某种原因，NgDoCheck运行了两次，一旦我添加button.style.width = widest + 'px';语句，所有按钮的宽度都将为115px，因此第二次运行ngDoCheck时，它将再次遍历所有按钮，但这次所有按钮都将设置为115px，因此widest永远无法成为159px的正确值，因为我们在第一次运行ngDoCheck时设置了该值。

解决这个问题的正确方法是什么？使用DoCheck似乎是错误的，因为它运行了两次，而且我并没有真正检查输入值，这是DoCheck在阅读文档时的用例。

export class ButtonGroupComponent implements DoCheck {
  constructor(private _elementRef: ElementRef) {}
  ngDoCheck() {
    if (this.equalWidth) {
      let buttons = this._elementRef.nativeElement.getElementsByTagName('button');
      let widest = 0;
      for (var button of buttons) {
        if (button.getBoundingClientRect().width > widest) {
          widest = button.getBoundingClientRect().width;
        }
      }
      for (var button of buttons) {
        button.style.width = widest + 'px';
      }
    }
  }
}

使用AfterViewInit似乎可以做到这一点，它只执行一次，从而产生正确的行为和正确的值。这就像将DoCheck和ngDoCheck替换为AfterViewInit和ngAfterViewInit:一样简单

export class ButtonGroupComponent implements AfterViewInit {
  constructor(private _elementRef: ElementRef) {}
  ngAfterViewInit() {
    if (this.equalWidth) {
      let buttons = this._elementRef.nativeElement.getElementsByTagName('button');
      let widest = 0;
      for (var button of buttons) {
        if (button.getBoundingClientRect().width > widest) {
          widest = button.getBoundingClientRect().width;
        }
      }
      for (var button of buttons) {
        button.style.width = widest + 'px';
      }
    }
  }
}

希望这能帮助其他人进行DOM操作。

相关文章：