Angular 2：如何在@Component样式块中使用动态获取的高度变量？

嘿，这个问题我之前也踩过坑！直接在组件的styles代码块里写this.contentHeight+px肯定行不通，因为styles里的CSS是静态编译的，根本没法直接访问组件类里的动态属性。不过有两个靠谱的办法能实现你的需求，我给你拆解下：

方法一：用内联样式绑定（最直接） #

直接在模板里给目标元素绑定动态高度，把你获取到的contentHeight值传进去就行。这样组件类里拿到高度后，会自动同步到元素样式上。

修改你的代码示例：

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

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockOne {
      background: blue;
      height: 150px; /* 示例高度 */
    }
    .blockTwo {
      background: yellow;
      /* 这里不用写固定高度了，交给内联绑定处理 */
    }
  `]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('contentBlock') contentBlock!: ElementRef;
  contentHeight!: number;

  ngAfterViewInit() {
    // 在视图初始化完成后获取div高度
    this.contentHeight = this.contentBlock.nativeElement.offsetHeight;
  }
}

对应的模板：

<div #contentBlock class="blockOne">
  这是用来获取高度的参考div
</div>
<!-- 用[style.height]绑定动态高度 -->
<div class="blockTwo" [style.height]="contentHeight + 'px'">
  这个div的高度会和上面的div完全一致
</div>

方法二：用CSS变量（适合复用场景） #

如果这个高度值需要在多个元素或者复杂样式里复用，用CSS变量（自定义属性）会更灵活。你可以在组件类里动态设置CSS变量，然后在styles里引用它。

修改后的代码示例：

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

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html',
  styles: [`
    .blockOne {
      background: blue;
      height: 150px;
    }
    .blockTwo {
      background: yellow;
      /* 引用CSS变量，200px作为默认 fallback */
      height: var(--block-height, 200px);
    }
  `]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('contentBlock') contentBlock!: ElementRef;

  ngAfterViewInit() {
    const contentHeight = this.contentBlock.nativeElement.offsetHeight;
    // 给文档根节点设置CSS变量，作用域全局
    document.documentElement.style.setProperty('--block-height', `${contentHeight}px`);
    // 如果你只想让变量作用在当前组件内，也可以给组件宿主元素设置：
    // this.elementRef.nativeElement.style.setProperty('--block-height', `${contentHeight}px`);
  }
}

模板不用改太多，保留#contentBlock标记就行：

<div #contentBlock class="blockOne">
  这是用来获取高度的参考div
</div>
<div class="blockTwo">
  这个div的高度会同步参考div的高度
</div>

简单总结下：如果只是单个元素需要动态高度，用内联绑定最省事；如果要在多个地方复用这个高度值，CSS变量会更优雅。

内容的提问来源于stack exchange，提问作者ttmt