Swiper 轮播在 ionic Angular 项目的组件中不起作用

Question

滑动轮播在所有页面上都运行良好。但在组件中不起作用。

//app.module.ts

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

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})


//app.component.ts
import { register } from 'swiper/element/bundle';
register();


//home.page.html
<swiper-container [slidesPerView]="5" [loop]="true" class="header-categories">
  <swiper-slide class="ion-text-center" *ngFor="let category of categories">
    <ion-button shape="round" color="light" size="large" (click)="category_products(category.id)">
      <ion-icon slot="icon-only" name="{{category.app_image}}"></ion-icon>
    </ion-button>
    <ion-label class="fs-small">{{category.name}}</ion-label>
  </swiper-slide>
</swiper-container>



//home.page.ts
import { IonicSlides } from '@ionic/angular'; //For crousel
import { SwiperOptions } from 'swiper/types';

此代码可在页面上运行。但是当我在组件中添加相同的 html 和 ts 文件代码时，它会显示此错误。

error NG8001: 'swiper-container' is not a known element

为什么它无法识别组件中的滑动标签，知道吗？

Answer 1

您的主页组件必须是

standalone: true

，如果您使用的是 Angular 19 那么默认情况下它可能是独立的。在这种情况下，您应该将

CUSTOM_ELEMENTS_SCHEMA

添加到组件装饰器内的

schemas

数组中。

@Component({
  selector: 'app-home-page',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class HomePageComponent {
  ...
}