ngx-bootstrap carousal 的响应式变化

Question

我正在学习角度并面临问题，同时使网站在 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，并且不会再次更新（因为您的问题不需要）。当您使用低于 480 像素的设备加载页面时，它会在滑块上显示一张图像，如果更大，则会显示 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。

PS：如果您使用通用，这将不起作用，您将需要注入 windowsService 而不是直接在组件中使用 windows 对象（这是本机浏览器 windows 对象，而不是角度服务）。

希望这可以帮助 ：）