用到的变量包括： changing变量保证同时只能进行一个切换，保证切换完成才能进行下一个切换；swiperList装填所有的视图的id，这个id在视图初始化的时候生成；displayList数组只会有三个成员，装填的依次是当前视图在swiperList中的索引，下一个视图的索引，上一个视图的索引；current变量用户指示当前显示的视图的id。实际视图中的显示的控制就是使用ngClass指令来根据displayList和视图id附加相应的类，当前视图会正好显示，前一视图会在左边刚好遮挡，后一视图会在右边刚好遮挡。
同时服务还要提供几个方法：Add用于添加制定id的视图，Next用于切换到下一个视图(左滑时调用)，Prev用于切换到前一个视图(右滑时调用)，再来一个Skip用于直接切换到指定id的视图。
在子视图中注入此服务，需要在子视图初始化时生成一个id并Add到视图列表中：
export class YTMSwiperViewComponent {
public childId: number;
constructor(@Optional() @Host() public swiper: SwiperService) {
this.childId = this.swip
@Injectable()
class SwiperService {
public swiperList: number[];
public displayList: number[]; // 0为当前 1为下一个 2为上一个
public current: number;
private changing: boolean;
constructor() {
this.changing = false;
this.swiperList = [];
this.displayList = [];
this.current = 0;
}
public Add(id: number) {
this.swiperList.push(id);
switch (this.swiperList.length) {
case 1:
this.displayList[0] = id;
return;
case 2:
this.displayList[1] = id;
return;
default:
this.displayList[2] = id;
return;
}
}
public Next(): Promise<any> {
if (this.changing) {
return new Promise<any>((resolve, reject) => {
return reject('on changing');
});
}
this.changing = true;
let c = this.swiperList.indexOf(this.displayList[0]);
let n = this.swiperList.indexOf(this.displayList[1]);
let p = this.swiperList.indexOf(this.displayList[2]);
p = c;
c = n;
n = (c + 1) % this.swiperList.length;
this.displayList[0] = this.swiperList[c];
this.displayList[2] = this.swiperList[p];
this.displayList[1] = -1;
setTimeout(() => {
this.displayList[1] = this.swiperList[n];
this.changing = false;
}, 500);
return new Promise<any>((resolve, reject) => {
return resolve(this.displayList[0]);
});
}
public Prev(): Promise<any> {
if (this.changing) {
return new Promise<any>((resolve, reject) => {
return reject('on changing');
});
}
this.changing = true;
let c = this.swiperList.indexOf(this.displayList[0]);
let n = this.swiperList.indexOf(this.displayList[1]);
let p = this.swiperList.indexOf(this.displayList[2]);
n = c;
c = p;
p = p - 1 < 0 ? this.swiperList.length - 1 : p - 1;
this.displayList[0] = this.swiperList[c];
this.displayList[1] = this.swiperList[n];
this.displayList[2] = -1;
setTimeout(() => {
this.displayList[2] = this.swiperList[p];
this.changing = false;
}, 500);
return new Promise<any>((resolve, reject) => {
return resolve(this.displayList[0]);
});
}
public Skip(index: number): Promise<any> {
let c = this.swiperList.indexOf(this.displayList[0]);
if (this.changing || c === index) {
return new Promise<any>((resolve, reject) => {
reject('on changing or no change');
});
}
this.changing = true;
let n = (index + 1) % this.swiperList.length;
let p = index - 1 < 0 ? this.swiperList.length - 1 : index - 1;
this.displayList[0] = this.swiperList[index];
if (index > c) {
this.displayList[2] = this.swiperList[p];
this.displayList[1] = -1;
setTimeout(() => {
this.displayList[1] = this.swiperList[n];
this.changing = false;
}, 500);
return new Promise<any>((resolve, reject) => {
return resolve(this.displayList[0]);
});
} else {
this.displayList[1] = this.swiperList[n];
this.displayList[2] = -1;
setTimeout(() => {
this.displayList[2] = this.swiperList[p];
this.changing = false;
}, 500);
return new Promise<any>((resolve, reject) => {
return resolve(this.displayList[0]);
});
}
}
}
er.swiperList.length;
this.swiper.Add(this.swiper.swiperList.length);
}
}
这个id其实就是已有列表的索引累加，且一旦有新视图被初始化，都会添加到列表中(支持动态加入很酷，虽然不知道会有什么隐藏问题发生)。
父组件中首先必须要配置一个provider声明服务：