何时调用计算元素宽度的函数？

Question

在我的 Angular 项目中，我有两张桌子。 其中一个表加载了来自服务的数据，并在 ngOnInit 上返回此数据。

我正在计算标题列的宽度并将其应用于另一个表。 我调用 this.resizeColumn() 函数：

  ngAfterViewInit() {
this.resizeColumns();    
 }

还有：

 @HostListener('window:resize')
 onResize() {   
this.resizeColumns();
}

问题是，第一次打开页面时，计算的宽度尚未应用。 一旦我调整窗口大小，两个标题就会匹配。 这个想法是每当表格宽度发生变化时，这个函数也会被调用。 在什么事件或生命周期挂钩之后我应该调用 resizeColumn，以便最初两个表具有相同的列宽？

Answer 1

您可以利用属性绑定来链接两个表的列宽，如this plunker 所示。在我的示例中，顶部表格中的列宽定期增加，底部表格列宽跟随属性绑定。

<table>
  <tr #table1Row>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  <tr>
</table>

<table>
  <tr>
    <td [style.width.px]="getColWidth(table1Row, 0)">Column 1</td>
    <td [style.width.px]="getColWidth(table1Row, 1)">Column 2</td>
    <td [style.width.px]="getColWidth(table1Row, 2)">Column 3</td>
  <tr>
</table>

// Get the column width from Table 1
public getColWidth(row: HTMLTableRowElement, index: number): number {
  return row.cells[index].offsetWidth;
}

更新：

如果您需要进行异步更改（以避免 Angular 异常），您可以尝试以下代码（在 this plunker 中实现）。它调用setTimeout获取当前执行周期后的新宽度。

private colWidths: Array<number> = [ 0, 0, 0 ];

public getColWidth(row: HTMLTableRowElement, index: number): number {
  let width = row.cells[index].offsetWidth;
  if (Math.abs(this.colWidths[index] - width) > 0.001) {
    setTimeout(() => {
      this.colWidths[index] = width;
    }, 0);
  }
  return this.colWidths[index];
}