Angular中如何在CSS文件正确使用组件.ts中的属性

问题分析 #

你的CSS代码里直接用$mobImg和var($deskImg)的写法存在错误：

• $mobImg是Sass变量语法，但它无法获取Angular组件类中的@Input动态属性值
• var($deskImg)用法错误，CSS变量的正确引用格式是var(--变量名)，且原生CSS/Sass变量无法直接关联组件的Input属性

要把组件的mobImg和deskImg动态绑定为背景图，需要借助Angular的样式绑定机制，以下是两种可行方案：

方案一：通过CSS自定义属性传递动态值（推荐，适配原有CSS结构） #

这种方式可以保留大部分原有CSS代码，仅需在模板中绑定自定义属性：

1. 修改story-section.component.html，给目标div添加自定义属性绑定：

<div 
  class="bgImg h-[400px] md:h-[600px] text-white flex flex-col justify-end text-[13px] group hover:-translate-y-5"
  [style.--mob-img]="'url(' + mobImg + ')'"
  [style.--desk-img]="'url(' + deskImg + ')'"
>
  <div class="px-10">{{ time }}</div>
  <div class="my-1 text-[18px] font-bold leading-[25px] px-10">
    {{ storyHeader }}
  </div>
  <div class="px-10">{{ by }}</div>
  <hr class="my-4 opacity-60 px-10" />
  <div class="mb-10 mt-1 px-10">
    <app-arrow-button arrowButtonText="READ STORY"></app-arrow-button>
  </div>
  <div
    class="bg-gradient-to-tr from-clrFrom via-clrVia to-clrTo h-[6px] w-full hidden group-hover:block"
  ></div>
</div>

2. 修改story-section.component.css，使用CSS变量引用动态值：

.bgImg {
  background-image: var(--mob-img);
  background-repeat: no-repeat;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

@media only screen and (min-width: 768px) {
  .bgImg {
    background-image: var(--desk-img);
  }
}

方案二：模板内直接绑定样式 #

如果不想使用CSS变量，也可以直接在模板中通过ngStyle或属性绑定设置背景图：

修改story-section.component.html：

<div 
  class="h-[400px] md:h-[600px] text-white flex flex-col justify-end text-[13px] group hover:-translate-y-5"
  [style.backgroundImage]="'url(' + mobImg + ')'"
  [style.backgroundRepeat]="'no-repeat'"
  [style.backgroundSize]="'100% 100%'"
>
  <!-- 原有内容保持不变 -->
</div>

若需要在桌面端切换为deskImg，可以结合Angular的断点监听：

1. 在组件类中添加断点监听逻辑：

import { Component, Input, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-story-section',
  templateUrl: './story-section.component.html',
  styleUrls: ['./story-section.component.css']
})
export class StorySectionComponent implements OnInit{
  @Input() public mobImg = "";
  @Input() public deskImg = "";
  @Input() public storyHeader = "";
  @Input() public by = "";
  @Input() public time = "";

  isDesktop = false;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    this.breakpointObserver.observe(Breakpoints.Web)
      .pipe(map(result => result.matches))
      .subscribe(isMatch => {
        this.isDesktop = isMatch;
      });
  }
}

2. 模板中用ngStyle切换背景图：

<div 
  class="h-[400px] md:h-[600px] text-white flex flex-col justify-end text-[13px] group hover:-translate-y-5"
  [ngStyle]="{
    'background-image': isDesktop ? 'url(' + deskImg + ')' : 'url(' + mobImg + ')',
    'background-repeat': 'no-repeat',
    'background-size': '100% 100%'
  }"
>
  <!-- 原有内容不变 -->
</div>

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