Angular 如何使用带有17角的Swiper 11.0.5元素

发布于01月09日

在Angular 17中，所有组件都是独立的组件，没有app.mode.ts文件.那么，我们把这个代码放在哪里呢，

从"Swiper/Element"中导入{Register}；

登记册(REGIST)；

我得到这个错误，因为register()没有正确注册，

错误类型错误:this.el.nativeElement.初始化不是函数

修复此错误，

错误类型错误:this.el.nativeElement.初始化不是函数

推荐答案

我用swiper-elements让它工作，但这不是一个完美的解决方案，这有点像黑客解决方案，我用CUSTOM_ELEMENTS_SCHEMA来消除Angular 误差，因为找不到元素，然后它开始工作得很好！

卷轴包装器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>

刷卡包装纸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() {}
}

stackblitz个

ngFor example stackblitz个