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

Question

在我的 angular 项目中，我有两个 table。 table 之一从服务加载数据，并在 ngOnInit 上返回此数据。

我正在计算 header 列宽度并将其应用于另一个 table。我在 :

上调用 this.resizeColumn() 函数

  ngAfterViewInit() {
this.resizeColumns();    
 }

还有：

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

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

Answer 1

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

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

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

When to call function that calculates width of elements?

angular

angular5