ngx-bootstrap carousal 的响应变化

Question

我正在学习 angular 并在 ngx-bootstrap carousal 中使网站响应时遇到问题。是否可以在 ngx-bootstrap carousal 中进行响应式更改？

在主视图中，我在每个视图中显示 3 张图像，而我只想在移动视图中显示 1 张图像。我在这里分享我的代码。

testimonials.component.html

中的代码

<carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [interval]="false" [noWrap]="noWrap">
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
</carousel>

testimonials.component.ts 文件中的代码

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

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';
    constructor() { }

    ngOnInit(): void {
    }
}

Answer 1

经过一段时间的调查，我想出了一个我认为适合你的解决方案。

您需要考虑的是它不监听屏幕宽度的变化。

这意味着，itemsPerSlide 的值是在 ngInit 方法上设置的，并且再也不会更新（因为您的问题不需要它）。当您使用 480px 以下的设备加载页面时，它会在滑块上显示一张图片，如果更大，则显示 3.

您可以更改断点更改私有属性 mobileBreakpoint.

上的值

让我们看看您的示例会是什么样子：

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

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';

    private innerWidth: number;
    private mobileBreakpoint = 480;

    constructor() { }

    ngOnInit(): void {
      this.adjustsItemsPerSlide();
    }

  private adjustsItemsPerSlide() {
    this.innerWidth = window.innerWidth;
    if (this.innerWidth < this.mobileBreakpoint) {
      this.itemsPerSlide = 1;
    } else {
      this.itemsPerSlide = 3;
    }
  }
}

private innerWidth: number; 保存当前视口宽度。用于决定使用itemsPerSlide的数量。
private mobileBreakpoint = 480; 保留断点，此时我们将使用 3 或 1 张幻灯片。
private adjustsItemsPerSlide：此方法将读取当前视口宽度并在 this.itemsPerSlide.

我还创建了一个显示所需效果的 example on stackblitz。

PS：如果你使用的是 universal，这将不起作用，你需要注入一个 windowsService 而不是使用 windows 对象（它是原生的浏览器 windows 对象，而不是 angular 服务）直接在组件中。

希望这对您有所帮助:)

ngx-bootstrap carousal 的响应变化

Responsive changes in ngx-bootstrap carousal

html

carousel

bootstrap-4

ngx-bootstrap

angular