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方法上設置的，並且永遠不會再次更新（因為您的問題不需要它）。 當您使用低於 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上應用不同的值。

我還在stackblitz 上創建了一個示例，顯示了所需的效果。

PS：如果您使用的是通用的，這將不起作用，您將需要注入 windowsService 而不是直接在組件中使用 windows 對象（這是本機瀏覽器 windows 對象，而不是角度服務）。

希望這可以幫助 ：）