Question

我正在将一个名为Swiper-Angular2的组件导入到我的IONIC 2项目中，但我收到一个奇怪的错误：

SyntaxError：docs / file.js：解析文件时出现意外的令牌（13:22）：docs / file.js

到目前为止，我的代码是：

page.js

import {Page} from 'ionic-angular';
import {Example1} from '../swiper/swiper';


@Page({ 
templateUrl: 'build/pages/home/home.html',
directives: [Example1]
})
export class HomePage {}

page.html中

<ion-content>
<example1><example1>
</ion-content>

swiper.js

import {Component, ViewChild, AfterViewInit} from 'angular2/core';
import {KSSwiperContainer, KSSwiperSlide} from 'angular2-swiper';

@Component({
selector: 'example1',
pipes: [],
providers: [],
directives: [KSSwiperContainer, KSSwiperSlide],
template: require('./swiper.html')
})
//The error triggers here, exactly after "Example1"
export class Example1 implements AfterViewInit {

@ViewChild(KSSwiperContainer) swiperContainer: KSSwiperContainer;

example1SwipeOptions: any;

constructor() {
this.example1SwipeOptions = {
  slidesPerView: 4,
  loop: false,
  spaceBetween: 5
};
}

moveNext() {
this.swiperContainer.swiper.slideNext();
}

movePrev() {
this.swiperContainer.swiper.slidePrev();
}

ngAfterViewInit() {
console.log(this.swiperContainer);
}

}

Swiper.html

<div class="myslides">
<ks-swiper-container [options]="example1SwipeOptions">
<ks-swiper-slide *ngFor="#s of [1,2,3,4,5,6,7]">
<img src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
</ks-swiper-slide>
</ks-swiper-container>
<button (click)="movePrev()">Prev</button>
<button (click)="moveNext()">Next</button>
</div>

关于导致问题的原因的任何想法？

Answer 1

检查出来：

https://forum.ionicframework.com/t/insert-swiper-slides-per-view-carousel-mode/50355

我相信你甚至不需要导入Swiper;但是，您可以简单地使用它，因为它已经在IONIC2中内置。

IONIC2 - 语法错误：docs / file.js：解析文件时出现意外的令牌（13:22）：docs / file.js

1 个答案: