更改ng-bootstrap轮播中的箭头颜色

Question

我正在使用ng-bootstrap创建轮播，我想将箭头颜色或图像从白色更改为黑色，因为我有白色背景图像并且它们不可见。我的问题是我无法跨度，我不知道如何在scss中称呼它。我正在将Bootstrap 4和ng-bootstrap用于角度https://ng-bootstrap.github.io/#/components/carousel/examples。当我在控制台中更改图像URL时，它可以工作。我试图直接获得箭头，但没有任何反应。

我的代码：

<div class="col-lg-6">
      <div class="imageCarousel">
        <ng-container *ngIf="product.images">
          <ngb-carousel>
            <ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
              <img [src]="image">

            </ng-template>

          </ngb-carousel>
        </ng-container>
      </div>
    </div>

scss：

.imageCarousel {
        max-height: 500px;
        text-align: center;
        color: $color2;
        .carousel .slide {
            width: 50px;
            height: 50px;
            background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
        }

        img {
            // border: 2px solid blue;
            max-width: 100%;
            max-height: 400px;
        }
    }

Answer 1

是的，它已经解决了，但有时需要将视图封装设置为 None

@Component({
  selector: "app-builder",
  templateUrl: "./builder.component.html",
  styleUrls: ["./builder.component.css"],
  encapsulation: ViewEncapsulation.None
})

Answer 2

ngb-carousel使用SVG图像作为控件，您可以使用自己的prev和next按钮图像来覆盖它：

.carousel-control-prev-icon{
   background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}