mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Nav test
This commit is contained in:
@@ -4,6 +4,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {Nav, NavPush, NavPop, NavParams, Routable, Router, NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
|
||||
|
||||
import {SecondPage} from './pages/second-page'
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view',
|
||||
@@ -97,155 +98,3 @@ export default class FirstPage {
|
||||
new Routable(FirstPage, {
|
||||
url: '/first-page'
|
||||
})
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@View({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
|
||||
<ion-content class="padding">
|
||||
<p>
|
||||
<button class="button" (click)="pop()">Pop (Go back to 1st)</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button" nav-pop>Pop with NavPop (Go back to 1st)</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button" (click)="push()">Push (Go to 3rd)</button>
|
||||
</p>
|
||||
<p>
|
||||
Random: {{ val }}
|
||||
</p>
|
||||
<div class="green"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, NavPop, Navbar, Content]
|
||||
})
|
||||
export class SecondPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
params: NavParams
|
||||
) {
|
||||
// TODO: Shouldn't have to do this
|
||||
Router.setNavController(nav);
|
||||
|
||||
this.nav = nav;
|
||||
this.params = params;
|
||||
this.val = Math.round(Math.random() * 8999) + 1000;
|
||||
|
||||
|
||||
console.log('Second page params:', params);
|
||||
}
|
||||
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ThirdPage);
|
||||
}
|
||||
|
||||
viewLoaded() {
|
||||
console.log('viewLoaded second page');
|
||||
this.router = SecondPage.router.invoke(this);
|
||||
}
|
||||
|
||||
viewWillEnter() {
|
||||
console.log('viewWillEnter second page');
|
||||
}
|
||||
|
||||
viewDidEnter() {
|
||||
console.log('viewDidEnter second page');
|
||||
}
|
||||
|
||||
viewWillLeave() {
|
||||
console.log('viewWillLeave second page');
|
||||
}
|
||||
|
||||
viewDidLeave() {
|
||||
console.log('viewDidLeave second page');
|
||||
}
|
||||
|
||||
viewWillCache() {
|
||||
console.log('viewWillCache second page');
|
||||
}
|
||||
|
||||
viewDidCache() {
|
||||
console.log('viewDidCache second page');
|
||||
}
|
||||
|
||||
viewWillUnload() {
|
||||
console.log('viewWillUnload second page');
|
||||
}
|
||||
|
||||
viewDidUnload() {
|
||||
console.log('viewDidUnload second page');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new Routable(SecondPage, {
|
||||
url: '/second-page'
|
||||
})
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@View({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
|
||||
<ion-content class="padding">
|
||||
<p>
|
||||
<button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
|
||||
</p>
|
||||
<div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content]
|
||||
})
|
||||
export class ThirdPage {
|
||||
constructor(
|
||||
nav: NavController
|
||||
) {
|
||||
this.nav = nav
|
||||
}
|
||||
|
||||
pop() {
|
||||
this.nav.pop()
|
||||
}
|
||||
|
||||
viewLoaded() {
|
||||
console.log('viewLoaded third page');
|
||||
}
|
||||
|
||||
viewWillEnter() {
|
||||
console.log('viewWillEnter third page');
|
||||
}
|
||||
|
||||
viewDidEnter() {
|
||||
console.log('viewDidEnter third page');
|
||||
}
|
||||
|
||||
viewWillLeave() {
|
||||
console.log('viewWillLeave third page');
|
||||
}
|
||||
|
||||
viewDidLeave() {
|
||||
console.log('viewDidLeave third page');
|
||||
}
|
||||
|
||||
viewWillCache() {
|
||||
console.log('viewWillCache third page');
|
||||
}
|
||||
|
||||
viewDidCache() {
|
||||
console.log('viewDidCache third page');
|
||||
}
|
||||
|
||||
viewWillUnload() {
|
||||
console.log('viewWillUnload third page');
|
||||
}
|
||||
|
||||
viewDidUnload() {
|
||||
console.log('viewDidUnload third page');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
|
||||
import {Router, Routable, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@@ -22,6 +22,9 @@ export class ThirdPage {
|
||||
nav: NavController
|
||||
) {
|
||||
this.nav = nav
|
||||
|
||||
// TODO: Shouldn't have to do this
|
||||
Router.setNavController(nav);
|
||||
}
|
||||
|
||||
pop() {
|
||||
@@ -29,6 +32,7 @@ export class ThirdPage {
|
||||
}
|
||||
|
||||
viewLoaded() {
|
||||
this.router = ThirdPage.router.invoke(this);
|
||||
console.log('viewLoaded third page');
|
||||
}
|
||||
|
||||
@@ -65,3 +69,8 @@ export class ThirdPage {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
new Routable(ThirdPage, {
|
||||
url: '/third-page'
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user