Angular：页面切换恢复ViewEncapsulation或按需设置打印样式

核心问题 #

你用ViewEncapsulation.None导致组件的打印样式变成全局样式，组件销毁后这些样式不会自动移除，所以污染了其他页面。根本不需要修改组件封装，用动态控制样式的方式就能解决。

方案1：动态注入/移除打印样式（推荐） #

完全不用修改组件的encapsulation配置，只在点击打印时临时添加全局打印样式，打印结束后立刻移除，彻底避免污染。

代码实现 #

// dashboard.component.ts
import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: "dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.scss"]
  // 移除encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnDestroy {
  private printStyleEl?: HTMLElement;

  handlePrint() {
    // 1. 创建全局打印样式元素
    this.printStyleEl = document.createElement('style');
    this.printStyleEl.textContent = `
      @media print {
        @page { size: landscape; }
        .no-print, .no-print * { display: none !important; }
        body { -webkit-print-color-adjust: exact; }
        canvas { max-width: 100%; height: auto; }
        .printClass { display: inline-block; }
      }
    `;
    document.head.appendChild(this.printStyleEl);

    // 2. 触发打印
    window.print();

    // 3. 打印完成后清理样式
    const cleanUp = () => {
      if (this.printStyleEl) {
        document.head.removeChild(this.printStyleEl);
        this.printStyleEl = undefined;
      }
      window.removeEventListener('afterprint', cleanUp);
    };
    window.addEventListener('afterprint', cleanUp);
  }

  // 组件销毁时兜底清理，防止内存泄漏
  ngOnDestroy() {
    this.printStyleEl?.remove();
  }
}

方案2：结合组件样式隔离+动态处理@page规则 #

如果想保留组件内的打印样式隔离，只对@page这个无法隔离的规则做动态处理：

// dashboard.component.scss
// 可隔离的打印样式用组件上下文限定
@media print {
  :host-context(body) .no-print,
  :host-context(body) .no-print * {
    display: none !important;
  }
  :host-context(body) body {
    -webkit-print-color-adjust: exact;
  }
  :host-context(body) canvas {
    max-width: 100%;
    height: auto;
  }
  :host-context(body) .printClass {
    display: inline-block;
  }
}

然后在打印按钮点击时，只动态注入@page { size: landscape; }这一行样式，打印后移除，逻辑和方案1类似。

为什么原来的方法失效？ #

ViewEncapsulation.None会让Angular把组件样式直接插入全局<head>，且组件销毁时不会自动删除这些全局样式，必须手动清理。刷新页面会重置全局样式，但这是治标不治本的方法。

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