SwiperOptions 在 Angular 应用程序中不起作用

Question

我是 Angular 的新手，我想使用 swiper 10 作为旋转木马（对于 Angular 16）。

我想用

swiperOptions

定制我的旋转木马，但发生了什么事。

在我的 app.component.ts 中，我注册了 Swiper :

import { Component, OnInit } from '@angular/core';
import { register } from 'swiper/element/bundle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    register();
  }
}

我的旋转木马：

<swiper-container [config]="config">
     <swiper-slide>Slide 1</swiper-slide>
     <swiper-slide>Slide 2</swiper-slide>
     <swiper-slide>Slide 3</swiper-slide>
     <swiper-slide>Slide 4</swiper-slide>
</swiper-container>

和我的 carrousel-component.ts

import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper/types';

@Component({
  selector: 'app-your-project',
  templateUrl: './carrousel.component.html',
  styleUrls: ['./carrousel.component.scss'],
})
export class CarrouselComponent {

  public config: SwiperOptions = {
    navigation: true,
    slidesPerView: 2,
};
}

我什至尝试了这里解释的内容text与脚本标签，但仍然没有任何作用...

有什么我忘记了吗？

提前感谢您的帮助

Answer 1

如果您在 swiper-container 上将配置作为

attributes

传递，它工作正常，请进行此更改。

<swiper-container [slidesPerView]="2" [navigation]="true">
     <swiper-slide>Slide 1</swiper-slide>
     <swiper-slide>Slide 2</swiper-slide>
     <swiper-slide>Slide 3</swiper-slide>
     <swiper-slide>Slide 4</swiper-slide>
</swiper-container>

---

参考文献

1. 参考Stackblitz