angular - 什么时候调用计算元素宽度的函数？

Question

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

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

  ngAfterViewInit() {
this.resizeColumns();    
 }

还有:

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

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

Answer 1

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

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