Swiper 未显示在 ionic Angular 上

Question

Swiper（或只是 ng-template 部分）不会显示在 ionic Angular 上

Ionic Framework 的建议是使用 SwiperJs (https://swiperjs.com/) 而不是 Ion Slider（Ion Slider 将在下一个 Ionic 版本 7 中弃用）

库版本

"@angular/core": "~13.2.2",
"@ionic/angular": "^6.0.0",
"swiper": "^8.0.7",

“SwiperModule”模块已正确放入 app.module.ts 的导入中

控制台中没有错误。看图

组件代码

import { Component, OnInit } from '@angular/core';
//import Swiper core and required modules;
import SwiperCore from 'swiper';

@Component({
  selector: 'app-swiper-carousel',
  // templateUrl: './swiper-carousel.component.html',
  template: 
  `
    <swiper
      [slidesPerView]="3"
      [spaceBetween]="50"
      (swiper)="onSwiper($event)"
      (slideChange)="onSlideChange()"
    >
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
    </swiper>
  `
,
  styleUrls: ['./swiper-carousel.component.scss'],
})
export class SwiperCarouselComponent implements OnInit {

  constructor() { }

  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }

  ngOnInit() {}

}

package.json

{
  "name": "swiper-test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/forms": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@capacitor/android": "3.4.3",
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.4.3",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/angular": "^6.0.0",
    "rxjs": "~6.6.0",
    "swiper": "^8.0.7",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.2.3",
    "@angular/compiler": "~13.2.2",
    "@angular/compiler-cli": "~13.2.2",
    "@angular/language-service": "~13.2.2",
    "@capacitor/cli": "3.4.3",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}

Answer 1

如果您仅在一个组件/页面中需要 Swiper，那么您应该仅在该模块中导入和声明它。 app.module.ts 中的声明不起作用。

示例： 主页.ts 从 '@angular/core' 导入 { Component };

@Component({
  selector: 'app-home',
  // templateUrl: 'home.page.html',
  template:`
  <ion-content>
  <swiper
    [slidesPerView]="3"
    [spaceBetween]="50"
    (swiper)="onSwiper($event)"
    (slideChange)="onSlideChange()"
  >
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>
  <app-trial-component></app-trial-component>
  </ion-content>
`,
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public customDropdownOptions = {
    size: 'auto',
    reference: 'trigger',
    side: 'bottom',
    alignment: 'end',
  };
  text = 'normal text';
  constructor() {}
  changeColor() {
    this.text = 'changed';
  }
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }

}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { SwiperModule } from 'swiper/angular';
import {TrialComponentComponent} from '../trial-component/trial-component.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SwiperModule
  ],
  declarations: [HomePage,TrialComponentComponent]
})
export class HomePageModule {}

Answer 2

当遇到 Swiper 未出现在 Ionic Angular 应用程序中的问题时，您可以采取几个步骤来诊断和解决问题。以下是根据所提供的上下文针对常见问题量身定制的一些解决方案：

确保正确安装和导入：确保您已正确安装 Swiper 并将其导入到 Angular 模块中。由于 Swiper 从版本 6 开始已成为 Ionic 的默认滑块，因此您需要确保它在项目中正确设置。对于 Angular 项目，还要验证 Swiper 的 Angular 模块是否导入到您打算使用它的特定模块中，而不是导入到应用程序范围的模块中 3 。

检查更新：如果您最近将 Ionic 版本更新到 5.7.0 或更高版本，并尝试用 Swiper 替换 ion-slides，请确保 Swiper 与您正在使用的 Ionic 和 Angular 版本完全兼容使用。可能会出现兼容性问题，特别是如果您从离子幻灯片盛行的旧版本迁移过来2。

正确初始化 Swiper：如果您将 Swiper 与 Ionic 和 Angular 一起使用，请确保您遵循了正确的初始化过程。随着 Ionic 7 中离子滑块的删除，Swiper 必须在组件或页面中正确初始化才能按预期工作。这可能涉及直接在模板或组件类中配置 Swiper 选项 11 .

自动播放问题：如果 Swiper 的自动播放功能不起作用，这可能与 Swiper 未显示没有直接关系，但可能表明配置错误。确保自动播放模块在 Angular 组件中正确导入和配置。可能需要特定配置才能使自动播放按预期工作 8 .

确认 Swiper 的可见性：在更基本的层面上，确保 Swiper 组件正确包含在 HTML 模板中，并且没有任何 CSS 样式会无意中隐藏 Swiper 容器或其幻灯片。样式或模板语法中的错误可能会导致 Swiper 不可见 1 .

解决潜在的错误：如果您在将 Ionic Swiper 与某些版本的 Angular 或 Swiper.js 一起使用时遇到诸如 TypeError: mod is not a ... 之类的错误，这可能表明存在版本兼容性问题或错误。如果 Swiper 抛出异常或行为不符合预期，在 GitHub 等平台上检查已知问题或寻求解决这些错误的更新可以解决问题 5 。

查阅文档和社区：最后，利用 Ionic 框架文档、论坛和社区中提供的丰富知识。删除 ion-slide 以支持 Swiper 后，官方 Ionic Academy、论坛和其他社区渠道可以提供更新的指南、故障排除提示和常见问题的建议 4 7 .

通过执行这些步骤并根据您遇到的具体问题调整您的方法，您应该能够解决 Swiper 未在 Ionic Angular 应用程序中显示的问题。