Angular 4：如何将一个div的渲染高度同步至另一个div？

哈哈，这个坑我之前踩过好多次！你遇到的核心问题是DOM更新的时机滞后于属性变更——当你修改绑定到第一个模板的属性后，框架（不管是Angular、Vue还是React）并不会立刻把新内容渲染到DOM里，这时候用ElementRef拿到的自然还是旧的高度值。下面给你几个靠谱的解决方案：

1. 等待DOM更新完成后再获取高度 #

最简单的思路是先触发框架的变更检测，然后等DOM渲染完毕再读取高度。以Angular为例：

import { Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-height-sync',
  template: `
    <div #template1>{{ dynamicContent }}</div>
    <div #template2 [style.height.px]="syncedHeight">同步高度的模板</div>
    <button (click)="updateContent()">更新模板内容</button>
  `
})
export class HeightSyncComponent {
  @ViewChild('template1') template1!: ElementRef<HTMLDivElement>;
  dynamicContent = '初始短内容';
  syncedHeight = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  updateContent() {
    // 修改绑定属性
    this.dynamicContent = '这是一段非常长的新内容，用来撑开第一个模板的高度，测试同步效果';
    
    // 手动触发变更检测，让框架开始更新DOM
    this.cdr.detectChanges();
    
    // 用requestAnimationFrame等待DOM渲染完成（比setTimeout更精准）
    requestAnimationFrame(() => {
      this.syncedHeight = this.template1.nativeElement.offsetHeight;
    });
  }
}

如果是Vue，你可以用this.$nextTick()替代上面的detectChanges()+requestAnimationFrame；React则可以在useEffect里依赖属性变化，然后用useLayoutEffect获取高度。

2. 用ResizeObserver监听尺寸变化（更健壮） #

如果第一个模板的高度可能因为其他因素变化（比如窗口resize、子组件异步加载），那直接监听元素尺寸变化会更靠谱。ResizeObserver是浏览器原生API，专门用来监听元素的尺寸变更：

import { Component, ElementRef, ViewChild, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-height-sync',
  template: `
    <div #template1>{{ dynamicContent }}</div>
    <div #template2 [style.height.px]="syncedHeight">同步高度的模板</div>
  `
})
export class HeightSyncComponent implements OnDestroy {
  @ViewChild('template1') template1!: ElementRef<HTMLDivElement>;
  dynamicContent = '初始内容';
  syncedHeight = 0;
  private destroy$ = new Subject<void>();

  ngAfterViewInit() {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        if (entry.target === this.template1.nativeElement) {
          this.syncedHeight = entry.contentRect.height;
        }
      }
    });

    resizeObserver.observe(this.template1.nativeElement);

    // 组件销毁时取消监听，避免内存泄漏
    this.destroy$.pipe(takeUntil(this.destroy$)).subscribe(() => {
      resizeObserver.disconnect();
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 注意事项 #

• 尽量避免直接操作DOM样式（比如template2.nativeElement.style.height = ...），优先用框架的属性绑定（比如[style.height.px]），这样更符合框架的数据流规范。
• 如果是服务器渲染（SSR）场景，要注意ResizeObserver在服务端不可用，需要做兼容处理。

内容的提问来源于stack exchange，提问作者Nimish David Mathew