如何在Angular项目中无需SCSS，通过TS/HTML设置分页栏样式

一、HTML中直接设置样式（推荐） #

你使用的是第三方分页组件（推测为ng-bootstrap的pagination），Angular默认的视图封装会阻止外部SCSS样式穿透到子组件，直接在HTML内通过::ng-deep强制穿透样式即可，无需额外SCSS文件：

<div class="d-flex justify-content-center" *ngIf="totalCount && totalCount > 0">
    <pagination
        [totalItems]="totalCount"
        [boundaryLinks]="true"
        (pageChanged)="onPagerChange($event)"
        [itemsPerPage]="pageSize"
        previousText="&lsaquo;"
        nextText="&rsaquo;"
        firstText="&laquo;"
        lastText="&raquo;"
        pageBtnClass="black-background"
    >
    </pagination>
    <!-- 直接在父容器内嵌入样式，穿透到分页组件 -->
    <style>
        ::ng-deep .pagination .page-item .page-link {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 8px 14px;
            border-radius: 4px;
        }
        ::ng-deep .pagination .page-item.active .page-link {
            background-color: #333;
        }
        ::ng-deep .pagination .page-item.disabled .page-link {
            background-color: #222;
            color: #666;
            cursor: not-allowed;
        }
    </style>
</div>

• ::ng-deep会打破Angular的视图封装规则，让样式作用到嵌套的第三方组件DOM上
• 也可以用CSS变量简化，比如给pagination组件加style="--pg-bg:#000;--pg-color:#fff"，再在嵌入样式中引用变量

二、TS文件中动态设置样式 #

如果需要根据业务条件动态调整样式，可通过Renderer2或ElementRef操作DOM：

1. 组件类中注入依赖并实现样式设置逻辑：

import { Component, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements AfterViewInit {
  totalCount = 100;
  pageSize = 10;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.setPaginationStyles();
  }

  onPagerChange(event: any) {
    // 分页切换后重新设置样式（页码元素会重新渲染）
    this.setPaginationStyles();
  }

  private setPaginationStyles() {
    // 获取所有页码按钮
    const pageLinks = this.el.nativeElement.querySelectorAll('.pagination .page-link');
    pageLinks.forEach((link: HTMLElement) => {
      this.renderer.setStyle(link, 'background-color', '#000');
      this.renderer.setStyle(link, 'color', '#fff');
      this.renderer.setStyle(link, 'border', 'none');
    });

    // 给激活状态按钮单独设置样式
    const activeLink = this.el.nativeElement.querySelector('.pagination .page-item.active .page-link');
    if (activeLink) {
      this.renderer.setStyle(activeLink, 'background-color', '#333');
    }
  }
}

• 必须在ngAfterViewInit生命周期钩子中操作DOM，确保分页组件已渲染完成
• 分页切换后需要重新执行样式设置逻辑，因为组件会重新生成页码元素

补充：之前SCSS文件未生效的原因 #

核心是Angular的**视图封装（ViewEncapsulation）**机制：

• 默认情况下，Angular会给组件样式添加唯一属性标记（如_ngcontent-xxx），第三方组件的DOM元素没有该标记，导致样式无法匹配
• 若坚持用SCSS文件，需在样式选择器前加::ng-deep，或把样式放到全局styles.scss中（不推荐，易污染全局样式）

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