Angular 17中Swiper元素缩放功能失效，如何正确实现？

问题出在Swiper的Zoom功能需要两个关键配置，你只添加了属性但没完成完整设置：

• 必须显式导入Zoom模块：Swiper自定义元素默认不加载所有扩展模块，Zoom需要单独导入
• 幻灯片内必须用指定容器包裹内容：缩放功能需要作用在swiper-zoom-container容器上，而非直接作用于swiper-slide

具体修改步骤： #

1. 导入Zoom模块
   在组件文件顶部添加Zoom模块的导入：

import 'swiper/element/zoom';

2. 调整模板结构与配置
   给swiper-container加上[zoom]="true"属性，同时每个幻灯片内部用swiper-zoom-container包裹内容。

3. 完整修改后的组件代码

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'swiper/element/zoom'; // 新增Zoom模块导入

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>Swipe to change slides</p>
    <swiper-container [pagination]="{ clickable: true }" [zoom]="true">
      <swiper-slide>
        <swiper-zoom-container>Slide 1</swiper-zoom-container>
      </swiper-slide>
      <swiper-slide>
        <swiper-zoom-container>Slide 2</swiper-zoom-container>
      </swiper-slide>
      <swiper-slide>
        <swiper-zoom-container>Slide 3</swiper-zoom-container>
      </swiper-slide>
      <swiper-slide>
        <swiper-zoom-container>Slide 4</swiper-zoom-container>
      </swiper-slide>
    </swiper-container>`,
  styles: [
    `swiper-slide {
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    swiper-slide:nth-of-type(1) {
      background-color: red;
    }
    swiper-slide:nth-of-type(2) {
      background-color: green;
    }
    swiper-slide:nth-of-type(3) {
      background-color: blue;
      color: white;
    }
    swiper-slide:nth-of-type(4) {
      background-color: yellow;
    }`,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {}

完成以上修改后，就能通过双击幻灯片（桌面端）或捏合手势（移动端）触发缩放功能了。

内容的提问来源于stack exchange，提问作者Murmulodi