如何在Angular 15中使用Swiper 9最新版本？

1. 安装Swiper #

执行安装命令：

npm install swiper
# 或使用yarn
yarn add swiper

2. 配置Angular允许自定义元素 #

Angular默认会将未知标签识别为组件并抛出错误，因此需要在模块或独立组件中添加CUSTOM_ELEMENTS_SCHEMA来允许使用自定义元素：

方式一：在NgModule中配置

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 关键配置
})
export class AppModule { }

方式二：在独立组件中配置

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 关键配置
})
export class AppComponent { }

3. 导入Swiper元素与样式 #

在组件的TS文件中，按需导入Swiper的自定义元素模块和样式：

// 核心元素模块
import 'swiper/element';
// 基础样式
import 'swiper/css';
// 按需导入额外模块样式（比如分页、导航组件）
import 'swiper/css/pagination';
import 'swiper/css/navigation';

4. 在模板中使用Swiper #

直接在组件HTML模板中使用Swiper的自定义标签：

<swiper-container 
  slides-per-view="3" 
  space-between="30" 
  pagination="true" 
  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>

5. （可选）控制Swiper实例 #

如果需要在组件中手动控制Swiper（比如触发滑动、修改配置），可以通过ViewChild获取实例：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import type { SwiperContainer } from 'swiper/element';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('swiper') swiper!: ElementRef<SwiperContainer>;

  ngAfterViewInit() {
    // 修改自动播放配置
    this.swiper.nativeElement.swiper.params.autoplay = { delay: 2000 };
    // 更新实例使配置生效
    this.swiper.nativeElement.swiper.update();
  }

  // 手动触发下一页滑动
  slideNext() {
    this.swiper.nativeElement.swiper.slideNext();
  }
}

对应的模板需要给swiper-container添加模板引用变量：

<swiper-container #swiper slides-per-view="3" space-between="30" pagination="true" 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>
<button (click)="slideNext()">切换到下一页</button>

内容的提问来源于stack exchange，提问作者Raphaël Balet