javascript - 在 Angular 2 中访问元素之前如何正确等待元素获得正确的宽度？

Question

我正在尝试使按钮具有相同的宽度，但在访问按钮的宽度之前，我实际上在等待 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';
      }
    }
  }
}

Answer 1

使用 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 操作。