mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
so far so good nav stuff
This commit is contained in:
@ -13,6 +13,7 @@ export * from 'ionic/components/form/label/label'
|
|||||||
// export * from 'ionic/components/layout/layout'
|
// export * from 'ionic/components/layout/layout'
|
||||||
export * from 'ionic/components/list/list'
|
export * from 'ionic/components/list/list'
|
||||||
export * from 'ionic/components/nav/nav'
|
export * from 'ionic/components/nav/nav'
|
||||||
|
export * from 'ionic/components/nav/nav-controller'
|
||||||
export * from 'ionic/components/nav/nav-item'
|
export * from 'ionic/components/nav/nav-item'
|
||||||
// export * from 'ionic/components/nav/decorators'
|
// export * from 'ionic/components/nav/decorators'
|
||||||
export * from 'ionic/components/radio/radio'
|
export * from 'ionic/components/radio/radio'
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import * as util from 'ionic/util';
|
import * as util from 'ionic/util';
|
||||||
import {Transition, ClickBlock} from 'ionic/ionic';
|
import {Transition, ClickBlock} from 'ionic/ionic';
|
||||||
import {NavItem} from './nav-item'
|
import {NavItem} from './nav-item';
|
||||||
|
import {NavController} from './nav-controller';
|
||||||
|
|
||||||
|
|
||||||
const STAGED_STATE = 'staged';
|
const STAGED_STATE = 'staged';
|
||||||
@ -16,6 +17,7 @@ export class NavBase {
|
|||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
|
this.navCtrl = new NavController(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
set initial(Class) {
|
set initial(Class) {
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
|
|
||||||
export class NavController {
|
export class NavController {
|
||||||
constructor() {
|
|
||||||
|
constructor(nav) {
|
||||||
|
this._nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
push() {
|
push() {
|
||||||
return this.nav.push.apply(this.nav, arguments);
|
return this._nav.push.apply(this._nav, arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
pop() {
|
pop() {
|
||||||
return this.nav.pop.apply(this.nav, arguments);
|
return this._nav.pop.apply(this._nav, arguments);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
||||||
|
import {bind} from 'angular2/di';
|
||||||
|
|
||||||
import * as util from 'ionic/util';
|
import * as util from 'ionic/util';
|
||||||
|
import {NavController} from './nav-controller';
|
||||||
|
|
||||||
|
|
||||||
export class NavItem {
|
export class NavItem {
|
||||||
@ -16,14 +18,16 @@ export class NavItem {
|
|||||||
let resolve;
|
let resolve;
|
||||||
let promise = new Promise((res) => { resolve = res; });
|
let promise = new Promise((res) => { resolve = res; });
|
||||||
|
|
||||||
let injector = null;
|
let injector = this.nav.injector.resolveAndCreateChild([
|
||||||
|
bind(NavController).toValue(this.nav.navCtrl)
|
||||||
|
]);
|
||||||
|
|
||||||
this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
|
this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
|
||||||
.then((componentRef) => {
|
.then((componentRef) => {
|
||||||
|
|
||||||
this.component = componentRef;
|
this.component = componentRef;
|
||||||
this.domElement = componentRef.location.domElement;
|
this.domElement = componentRef.location.domElement;
|
||||||
|
this.domElement.classList.add('nav-item');
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
@ -3,6 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
|
|||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
||||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||||
|
import {Injector} from 'angular2/di';
|
||||||
|
|
||||||
import {NavBase} from 'ionic/components/nav/nav-base';
|
import {NavBase} from 'ionic/components/nav/nav-base';
|
||||||
import {NavItem, NavItemDynamicComponent} from 'ionic/components/nav/nav-item';
|
import {NavItem, NavItemDynamicComponent} from 'ionic/components/nav/nav-item';
|
||||||
@ -33,12 +34,14 @@ export class Nav extends NavBase {
|
|||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
loader: DynamicComponentLoader,
|
loader: DynamicComponentLoader,
|
||||||
elementRef: ElementRef
|
elementRef: ElementRef,
|
||||||
|
injector: Injector
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
this.loader = loader;
|
this.loader = loader;
|
||||||
this.viewManager = loader._viewManager;
|
this.viewManager = loader._viewManager;
|
||||||
this.elementRef = elementRef;
|
this.elementRef = elementRef;
|
||||||
|
this.injector = injector;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -5,15 +5,15 @@ import {NavController} from 'ionic/ionic'
|
|||||||
import {SecondPage} from './second-page'
|
import {SecondPage} from './second-page'
|
||||||
|
|
||||||
|
|
||||||
@Component()
|
@Component({selector: 'ion-view'})
|
||||||
@View({
|
@View({
|
||||||
templateUrl: 'pages/first-page.html'
|
templateUrl: 'pages/first-page.html'
|
||||||
})
|
})
|
||||||
export class FirstPage {
|
export class FirstPage {
|
||||||
constructor(
|
constructor(
|
||||||
//nav: NavController
|
nav: NavController
|
||||||
) {
|
) {
|
||||||
//this.nav = nav;
|
this.nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
push() {
|
push() {
|
||||||
|
@ -28,11 +28,11 @@ class IOSTransition extends Animation {
|
|||||||
this.leavingItem = navCtrl.getStagedLeavingItem();
|
this.leavingItem = navCtrl.getStagedLeavingItem();
|
||||||
|
|
||||||
// create animation for the entering item
|
// create animation for the entering item
|
||||||
let enteringItemAnimation = new Animation(this.enteringItem.navItem.domElement);
|
let enteringItemAnimation = new Animation(this.enteringItem.domElement);
|
||||||
|
|
||||||
// create animation for the leaving item
|
// create animation for the leaving item
|
||||||
// leavingItem could be null, but the animation instance knows to do nothing
|
// leavingItem could be null, but the animation instance knows to do nothing
|
||||||
let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.navItem.domElement);
|
let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.domElement);
|
||||||
|
|
||||||
// entering item moves to center
|
// entering item moves to center
|
||||||
// before starting, set enteringItem to display: block
|
// before starting, set enteringItem to display: block
|
||||||
|
Reference in New Issue
Block a user