Angular应用中动态管理响应式背景图片：从TypeScript到CSS

<!-- app.component.html -->
<div [ngStyle]="{'background-image': 'url(' + dynamicImageUrl + ')', 'background-size': '100%'}">
    <!-- 内容 -->
</div>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dynamicImageUrl: string = '/path/to/your/image.png'; // 假设这是从API获取的图片URL

  // 可以在某个事件或数据加载完成后更新此URL
  updateImage(newUrl: string) {
    this.dynamicImageUrl = newUrl;
  }
}

<!-- app.component.html -->
<div [style.background-image]="'url(' + dynamicImageUrl + ')'" [style.background-size]="'100%'">
    <!-- 内容 -->
</div>

ng add @angular/cdk

// your-component.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义你的数据结构，以便更好地类型检查
interface ContentInfo {
  contentDetail: {
    columnContent: {
      image: { path: string }
    }[];
  };
  components: {
    contentDetail: {
      columnContent: {
        image: { path: string }
      }[];
    }
  }[];
}

@Component({
  selector: 'app-welcome-block',
  templateUrl: './welcome-block.component.html',
  styleUrls: ['./welcome-block.component.css']
})
export class WelcomeBlockComponent implements OnInit, OnDestroy {
  contentInfo: ContentInfo; // 假设这是从API获取的数据
  dynamicImageUrl: string = '';
  private breakpointSubscription: Subscription;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 模拟从API获取的数据
    this.contentInfo = {
      contentDetail: {
        columnContent: [{ image: { path: '/stgw/digital/referrals/assets/Referred_L.png' } }] // 大图路径
      },
      components: [
        {}, {}, {}, {}, {}, {}, {},
        { contentDetail: { columnContent: [{ image: { path: '/stgw/digital/referrals/assets/Referred_S.png' } }] } }, // 小图路径
        { contentDetail: { columnContent: [{ image: { path: '/stgw/digital/referrals/assets/Referred_M.png' } }] } }  // 中图路径
      ] as any // 简化类型，实际应用中应定义完整类型
    };
  }

  ngOnInit() {
    // 监听屏幕尺寸变化
    this.breakpointSubscription = this.breakpointObserver.observe([
      Breakpoints.XSmall, // < 600px
      Breakpoints.Small,  // 600px - 959px
      Breakpoints.Medium, // 960px - 1279px
      Breakpoints.Large,  // 1280px - 1919px
      Breakpoints.XLarge, // >= 1920px
    ]).pipe(
      map(() => true) // 每次观察到变化时触发
    ).subscribe(() => {
      this.updateBackgroundImage(); // 更新背景图片
    });

    // 初始加载时更新背景图片
    this.updateBackgroundImage();
  }

  /**
   * 根据当前屏幕宽度选择合适的背景图片URL
   */
  updateBackgroundImage() {
    const currentWidth = window.innerWidth;
    let imagePath = '';

    // 根据CSS媒体查询的逻辑来判断
    if (currentWidth >= 1280) {
      // 对应 @media (min-width: 1280px)
      imagePath = this.contentInfo.contentDetail.columnContent[0].image.path;
    } else if (currentWidth >= 960) {
      // 对应 @media (min-width: 960px)
      // 注意：这里假设中图路径在 components[8]
      imagePath = this.contentInfo.components[8].contentDetail.columnContent[0].image.path;
    } else {
      // 默认小图，对应没有媒体查询或更小尺寸
      // 注意：这里假设小图路径在 components[7]
      imagePath = this.contentInfo.components[7].contentDetail.columnContent[0].image.path;
    }
    this.dynamicImageUrl = imagePath;
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.breakpointSubscription) {
      this.breakpointSubscription.unsubscribe();
    }
  }
}

<!-- your-component.component.html -->
<div id="welcome-block" 
     [ngStyle]="{'background-image': 'url(' + dynamicImageUrl + ')', 'background-size': '100%'}">
    <!-- 欢迎区块内容 -->
    <h1>欢迎来到我们的网站！</h1>
</div>

/* your-component.component.css */
#welcome-block {
    height: 300px; /* 示例高度 */
    background-repeat: no-repeat;
    background-position: center center;
    /* background-image 和 background-size 将由 TypeScript 动态设置 */
}