如何将 swiper 11.0.5 元素与 Angular 17 一起使用

Question

在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里呢，

从“swiper/element”导入{register}；

注册（）；

我收到此错误，因为 register() 未正确注册，

错误类型错误：this.el.nativeElement.initialize 不是函数

修复此错误，

错误类型错误：this.el.nativeElement.initialize 不是函数

Answer 1

我使用

swiper-elements

让它工作，但它不是一个完美的解决方案，它有点像黑客解决方案，我使用

CUSTOM_ELEMENTS_SCHEMA

来消除角度错误，因为找不到元素，然后它开始正常工作！

swiper 包装 html

<swiper-container
  slides-per-view="1"
  speed="500"
  loop="true"
  css-mode="true"
  navigation="true"
  pagination="true"
  scrollbar="true"
>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
</swiper-container>

swiper 包装器 ts

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

@Component({
  selector: 'app-swiper',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './swiper.component.html',
})
export class SwiperComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

堆栈闪电战