ngx-bootstrap 轮播中的响应式更改

Question

在 ngx-bootstrap 轮播中使网站响应时，我正在学习角度和面临的问题。是否可以在 ngx-bootstrap 轮播中进行响应式更改？

在主视图中，每个视图显示 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对象，而不是角度服务）。

希望这会有所帮助:)