Angular中能否从Component.ts调用方法到SCSS文件？求实现方案

首先明确：不能直接在SCSS文件中引用TypeScript组件里的变量。原因是SCSS属于构建阶段的预处理器，编译后会生成静态CSS文件；而TS中的变量是运行时才会赋值的动态数据，两者不在同一个执行上下文，编译SCSS时根本无法获取到TS变量的值。

下面提供两种可行的实现方式：

方式一：使用ngStyle指令绑定内联样式 #

直接在组件模板中通过ngStyle将TS里的屏幕尺寸变量绑定到元素的样式属性上，窗口resize时变量更新会自动同步到样式。

修改代码： #

1. 组件HTML (example.component.html)

<div class="content" [ngStyle]="{ height: getScreenHeight + 'px', width: getScreenWidth + 'px' }">
  <!-- 你的内容 -->
</div>

2. 组件SCSS (example.component.scss)

.content {
  display: flex;
  align-items: center;
  text-align: center;
  // 移除原来错误的height和width定义
}

3. 组件TS (example.component.ts) 保持原有逻辑不变（注意类名首字母大写，规范命名）：

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  public getScreenWidth: any;
  public getScreenHeight: any;

  constructor() { }

  ngOnInit(): void {
    this.getScreenWidth = window.innerWidth;
    this.getScreenHeight = window.innerHeight;
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.getScreenWidth = window.innerWidth;
    this.getScreenHeight = window.innerHeight;
  }
}

方式二：通过CSS自定义属性（变量）实现 #

在组件根元素上动态设置CSS变量，然后在SCSS中引用这些变量，实现样式与TS变量的同步。

修改代码： #

1. 组件TS (example.component.ts)

import { Component, OnInit, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    this.updateScreenSizeVars();
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.updateScreenSizeVars();
  }

  // 动态更新CSS变量
  private updateScreenSizeVars() {
    const width = `${window.innerWidth}px`;
    const height = `${window.innerHeight}px`;
    this.el.nativeElement.style.setProperty('--screen-width', width);
    this.el.nativeElement.style.setProperty('--screen-height', height);
  }
}

2. 组件SCSS (example.component.scss)

.content {
  display: flex;
  align-items: center;
  text-align: center;
  height: var(--screen-height);
  width: var(--screen-width);
}

这两种方式都能实现屏幕尺寸变化时，元素的宽高自动跟随更新的需求。

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