javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(slides): update to use @ViewChild

Browse Source
This commit is contained in:
Adam Bradley
2016-04-16 23:09:13 -05:00
parent 1daa7c5382
commit 2295bd9264
4 changed files with 23 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ionic/components/slides/test/basic/index.ts
View File

@ -1,20 +1,23 @@
import {App, IonicApp} from 'ionic-angular'; import {ViewChild} from 'angular2/core';
import {Http} from 'angular2/http'; import {Http} from 'angular2/http';
import {App, Slides} from 'ionic-angular';
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class MyApp { class MyApp {
constructor(app: IonicApp, http: Http) { mySlideOptions: any;
this.app = app; images: string[] = [];
this.http = http; @ViewChild(Slides) slider: Slides;
constructor(private http: Http) {
this.mySlideOptions = { this.mySlideOptions = {
loop: true loop: true
}; };
}
this.images = []; ngAfterViewInit() {
let tags = "amsterdam"; let tags = "amsterdam";
let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c'; let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
@ -27,24 +30,15 @@ class MyApp {
setTimeout(() => { setTimeout(() => {
this.slider.update(); this.slider.update();
}); });
}, (err) => { }, (err) => {
console.info('Unable to load images'); console.info('Unable to load images');
console.error(err); console.error(err);
})
}
ngOnInit() {
setTimeout(() => {
this.slider = this.app.getComponent('slider');
console.log('Got slider', this.slider);
}); });
} }
getImageUrl(item) { getImageUrl(item) {
return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg"; return `http://farm${item.farm}.static.flickr.com/${item.server}/${item.id}_${item.secret}_z.jpg`;
} }
doRefresh() {
console.log('DOREFRESH')
}
} }

4
ionic/components/slides/test/intro/index.ts
View File

@ -20,9 +20,7 @@ class IntroPage {
startingIndex: number = 1; startingIndex: number = 1;
mySlideOptions; mySlideOptions;
constructor(nav: NavController) { constructor(private nav: NavController) {
this.nav = nav;
this.mySlideOptions = { this.mySlideOptions = {
paginationClickable: true, paginationClickable: true,
lazyLoading: true, lazyLoading: true,

23
ionic/components/slides/test/loop/index.ts
View File

@ -1,12 +1,16 @@
import {App, IonicApp} from 'ionic-angular'; import {ViewChild} from 'angular2/core';
import {App, Slides} from 'ionic-angular';
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class MyApp { class MyApp {
constructor(app: IonicApp) { slides: any[];
this.app = app; @ViewChild('loopSlider') loopSlider: Slides;
startingIndex: number;
myTopSlideOptions: any;
constructor() {
this.slides = [ this.slides = [
{ {
name: "Slide 1", name: "Slide 1",
@ -22,23 +26,16 @@ class MyApp {
} }
]; ];
this.startingIndex = 2;
this.myTopSlideOptions = { this.myTopSlideOptions = {
index: this.startingIndex, initialSlide: 2,
loop: true loop: true
}; };
} }
onSlideChanged(slider) { onSlideChanged(slider: Slides) {
console.log('Slide changed', slider); console.log('Slide changed', slider);
console.log("active index", slider.activeIndex); console.log("active index", slider.activeIndex);
} }
ngOnInit() {
setTimeout(() => {
this.slider = this.app.getComponent('loopSlider');
console.log('Got slider', this.slider);
});
}
} }

2
ionic/components/slides/test/loop/main.html
View File

@ -1,5 +1,5 @@
<div class="slides-div"> <div class="slides-div">
<ion-slides [options]="myTopSlideOptions" id="loopSlider" (change)="onSlideChanged($event)" pager> <ion-slides [options]="myTopSlideOptions" #loopSlider (change)="onSlideChanged($event)" pager>
<ion-slide *ngFor="#slide of slides" [ngClass]="slide.class"> <ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
Loop {{ slide.name }} Loop {{ slide.name }}
</ion-slide> </ion-slide>