Angular组件自定义背景导航时缓存残留问题如何解决？

你遇到的背景残留问题本质是样式污染导致的：

• 开启ViewEncapsulation.None后，对应组件.scss文件中编写的body选择器样式会被注入到全局样式表，不会随组件销毁自动移除
• 页面跳转时旧组件被销毁，但你定义的全局body背景样式仍然生效，没有其他样式覆盖时就会出现残留，!important只会提升该样式的优先级，无法解决样式本身残留的问题

优先推荐以下两种无样式污染的实现方式，不需要开启ViewEncapsulation.None：

方案1：生命周期钩子动态设置/清理body样式 #

直接在组件初始化和销毁阶段操作body的行内样式，自动适配生命周期：

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

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.scss']
  // 移除原有的ViewEncapsulation.None配置
})
export class TargetComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    // 组件加载时设置背景
    document.body.style.backgroundImage = 'url(你的背景图资源路径)';
    // 可按需补充其他背景属性
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.backgroundPosition = 'center';
  }

  ngOnDestroy(): void {
    // 组件销毁时重置背景
    document.body.style.backgroundImage = 'none';
    document.body.style.backgroundSize = 'initial';
    document.body.style.backgroundRepeat = 'initial';
    document.body.style.backgroundPosition = 'initial';
  }
}

方案2：全局样式类绑定 #

如果希望样式统一在全局样式文件管理，可以通过给body添加/移除专属类实现：

1. 先在全局styles.scss中定义专属样式类：

body.target-page-bg {
  background-image: url(你的背景图资源路径);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

2. 在组件中控制类名的绑定：

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

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.scss']
})
export class TargetComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    document.body.classList.add('target-page-bg');
  }

  ngOnDestroy(): void {
    document.body.classList.remove('target-page-bg');
  }
}

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