Ionic 离子Angular 上未显示Swiper

Swiper（或仅ng模板部分）未显示在离子角
Ionic Framework的建议是使用SwiperJs（https://swiperjs.com/）而不是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"
}

如果你只在一个组件/页面中需要Swiper，那么你应该只在那个模块中导入和声明它。在app.module.ts中的声明将不起作用。
示例：home.page.ts从'@angular/core'导入{组件};

@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 {}

Ionic 离子Angular 上未显示Swiper

1条答案

相关问题

热门标签

最新问答