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

Question

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

在主视图中，每个 View 显示 3 张图像，而我只想在移动 View 中显示 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 以下的设备加载页面时，它会在 slider 上显示一个图像，如果它更大，它会显示 3。

您可以更改断点，更改私有(private)属性 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;保存当前视口(viewport)宽度。用于决定 itemsPerSlide 的数量将会被使用。

private mobileBreakpoint = 480;保存断点，此时我们将使用 3 或 1 张幻灯片。

private adjustsItemsPerSlide :此方法将读取当前视口(viewport)宽度并在 this.itemsPerSlide 上应用不同的值.

我还创建了一个 example on stackblitz这显示了预期的效果。

PS:如果您使用的是通用的，这将不起作用，并且您需要直接在组件中注入(inject) windowsService 而不是使用 windows 对象(这是 native 浏览器 windows 对象，而不是 Angular 服务)。

希望这可以帮助 :)