如何为Angular中ngx Owl Carousel的激活居中幻灯片设置样式？

核心问题原因 #

Angular默认的视图封装机制会为组件内定义的样式添加唯一属性前缀，而轮播生成的.owl-item.active.center元素不在组件模板的直接范围内，导致组件内的选择器无法匹配这些元素，样式不生效。

方案一：通过数据绑定动态添加自定义类（推荐） #

利用轮播的change事件获取居中幻灯片的索引，结合Angular的属性绑定为目标元素动态添加自定义类，实现组件内样式控制。

1. 修改组件类，跟踪居中幻灯片索引 #

export class RowClientsComponent implements OnInit {
  // ... 现有属性保持不变
  centerSlideIndex: number | null = null;

  getData(data: SlidesOutputData) {
    this.activeSlides = data;
    // 定位居中幻灯片的索引
    const centerSlide = data.slides.find(slide => slide.center);
    this.centerSlideIndex = centerSlide ? centerSlide.index : null;
  }

  // ... 其他方法保持不变
}

2. 模板中绑定索引，动态添加类 #

<owl-carousel-o [options]="testimonialsCarousel" (change)="getData($event)" class="w-100">
  <ng-container *ngFor="let testimonial of testimonials; let i = index">
    <ng-template carouselSlide>
      <article 
        class="d-flex flex-column align-items-center shadow p-4 m-3 text-center testing-class"
        [ngClass]="{'center-slide': i === centerSlideIndex}">
        
        <figure><img class="img-circle" [src]="testimonial.avatar" [alt]="testimonial.avatarAlt"></figure>
        <p>{{testimonial.text}}</p>
        <p>{{testimonial.author}}</p>
        
      </article>
    </ng-template>
  </ng-container>
</owl-carousel-o>

3. 组件CSS中定义自定义样式 #

.center-slide {
  background-color: #f5f5f5;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  /* 这里添加你需要的其他样式 */
}

方案二：使用全局样式 #

直接在项目全局样式文件（如styles.css）中编写样式，无需考虑视图封装限制：

.owl-item.active.center .testing-class {
  background-color: #f5f5f5;
  transform: scale(1.05);
}

方案三：绕过视图封装（不推荐） #

该方式依赖已废弃的::ng-deep语法，或直接禁用视图封装，可能导致样式泄漏到全局：

方式A：使用::ng-deep #

::ng-deep .owl-item.active.center .testing-class {
  background-color: #f5f5f5;
}

方式B：禁用视图封装 #

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

@Component({
  selector: 'app-row-clients',
  templateUrl: './row-clients.component.html',
  styleUrls: ['./row-clients.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class RowClientsComponent implements OnInit {
  // ... 组件逻辑
}

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