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

Question

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

我的代码：

<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')
}

Answer 3

Eduardo 给出的答案（上图）仅在封装设置为 ViewEncapsulation.None 时才有效，这会对 CSS 的其他方面产生意想不到的副作用。

而是可以使用 ::ng-deep 伪类来定位相关的特定 CSS。在您的 scss 文件中使用以下内容：

::ng-deep .carousel-control-prev-icon{
  background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
  background-image: url('your-replacement.svg');
}

Answer 4

首先，我建议升级到 ng-bootstrap v6+，它正确地将 ngb 组件 ViewEncapsulation 设置为 None，因此可以通过全局 CSS 或通过未封装的组件 CSS 进行设置。请参阅 (https://github.com/ng-bootstrap/ng-bootstrap/issues/3479)。

其次，只需重新设置 SVG 并将 fill 属性更改为您想要的任何颜色，即可覆盖 SVG。

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

或者，如果您只是想获得更多对比度，也可以反转颜色：

.carousel-control-next-icon,
.carousel-control-prev-icon {
   filter: invert(1);
}

在您的主机组件上设置 encapsulation: ViewEncapsulation.None 并不是最佳做法。更明智的做法是将这些条目更改为您的项目 styles.scss（或在 angular.json 中指定为全局样式文件的任何内容）

Answer 5

在提供的链接上检查该控件时，您可以看到您的两个按钮都附加了类。

那些箭头有一个背景图像属性。在您自己的 css 文件中为该属性覆盖该类。