From e06cf71aae1b0745639839d636173020db49ba26 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 15 Feb 2016 00:01:23 -0600 Subject: [PATCH] feat(tabs): rootParams, pass params to tabs Closes #5172 --- ionic/components/nav/view-controller.ts | 15 ++++++- ionic/components/tabs/tab.ts | 28 +++++++----- ionic/components/tabs/tabs.ts | 16 +++---- ionic/components/tabs/test/advanced/index.ts | 45 ++++++++----------- ionic/components/tabs/test/advanced/tabs.html | 2 +- ionic/decorators/app.ts | 2 +- 6 files changed, 57 insertions(+), 51 deletions(-) diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 403a73aec4..ae14fcb9de 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -34,6 +34,11 @@ export class ViewController { private _pgRef: ElementRef; protected _nav: NavController; + /** + * @private + */ + data: any; + /** * @private */ @@ -57,16 +62,22 @@ export class ViewController { /** * @private */ - onReady: any; + onReady: Function; /** * @private */ zIndex: number; + /** + * @private + */ @Output() private _emitter: EventEmitter = new EventEmitter(); - constructor(public componentType?: Type, public data: any = {}) {} + constructor(public componentType?: Type, data: any = {}) { + // passed in data could be NavParams, but all we care about is its data object + this.data = (data instanceof NavParams ? data.data : data); + } subscribe(callback) { this._emitter.subscribe(callback); diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index d3085660f5..30a96dd1d1 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -4,7 +4,7 @@ import {EventEmitter, Input, Output} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; import {Keyboard} from '../../util/keyboard'; -import {NavController} from '../nav/nav-controller'; +import {NavController, NavOptions} from '../nav/nav-controller'; import {ViewController} from '../nav/view-controller'; import {Tabs} from './tabs'; import {TabButton} from './tab-button'; @@ -99,12 +99,16 @@ export class Tab extends NavController { */ btn: TabButton; - /** - * @input {page} Set the root page for this tab + * @input {Page} Set the root page for this tab */ @Input() root: Type; + /** + * @input {object} Any nav-params you want to pass to the root page of the tab + */ + @Input() rootParams: any; + /** * @input {string} Set the title of this tab */ @@ -126,9 +130,9 @@ export class Tab extends NavController { @Input() tabBadgeStyle: string; /** - * @pinput {any} Method to call when the current tab is selected + * @output {Tab} Method to call when the current tab is selected */ - @Output() select: EventEmitter = new EventEmitter(); + @Output() select: EventEmitter = new EventEmitter(); constructor( @Inject(forwardRef(() => Tabs)) parentTabs: Tabs, @@ -160,9 +164,9 @@ export class Tab extends NavController { /** * @private */ - load(opts, done?: Function) { + load(opts: NavOptions, done?: Function) { if (!this._loaded && this.root) { - this.push(this.root, null, opts).then(() => { + this.push(this.root, this.rootParams, opts).then(() => { done(); }); this._loaded = true; @@ -176,7 +180,7 @@ export class Tab extends NavController { /** * @private */ - preload(wait) { + preload(wait: number) { this._loadTimer = setTimeout(() => { if (!this._loaded) { console.debug('Tabs, preload', this.id); @@ -195,7 +199,7 @@ export class Tab extends NavController { /** * @private */ - loadPage(viewCtrl, navbarContainerRef, opts, done) { + loadPage(viewCtrl: ViewController, navbarContainerRef: any, opts: NavOptions, done: Function) { // by default a page's navbar goes into the shared tab's navbar section navbarContainerRef = this.parent.navbarContainerRef; @@ -217,7 +221,7 @@ export class Tab extends NavController { /** * @private */ - setSelected(isSelected) { + setSelected(isSelected: boolean) { this.isSelected = isSelected; this.hideNavbars(!isSelected); } @@ -225,7 +229,7 @@ export class Tab extends NavController { /** * @private */ - hideNavbars(shouldHideNavbars) { + hideNavbars(shouldHideNavbars: boolean) { this._views.forEach(viewCtrl => { let navbar = viewCtrl.getNavbar(); navbar && navbar.setHidden(shouldHideNavbars); @@ -235,7 +239,7 @@ export class Tab extends NavController { /** * @private */ - get index() { + get index(): number { return this.parent.getIndex(this); } diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 580388c90b..44de1b01d8 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -1,4 +1,4 @@ -import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer} from 'angular2/core'; +import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, Type} from 'angular2/core'; import {NgFor, NgIf} from 'angular2/common'; import {IonicApp} from '../app/app'; @@ -90,12 +90,12 @@ export class Tabs extends Ion { subPages: boolean; /** - * @input {any} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab. + * @input {number} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab. */ @Input() selectedIndex: any; /** - * @input {any} Sets whether to preload all the tabs, true or false + * @input {boolean} Sets whether to preload all the tabs, true or false */ @Input() preloadTabs: any; @@ -269,9 +269,9 @@ export class Tabs extends Ion { /** * @param {number} index Index of the tab you want to get - * @returns {any} Tab Returs the tab who's index matches the one passed + * @returns {Tab} Returns the tab who's index matches the one passed */ - getByIndex(index: number): any { + getByIndex(index: number): Tab { if (index < this._tabs.length && index > -1) { return this._tabs[index]; } @@ -279,7 +279,7 @@ export class Tabs extends Ion { } /** - * @return {any} Tab Returns the currently selected tab + * @return {Tab} Returns the currently selected tab */ getSelected(): Tab { for (let i = 0; i < this._tabs.length; i++) { @@ -302,7 +302,7 @@ export class Tabs extends Ion { * "Touch" the active tab, going back to the root view of the tab * or optionally letting the tab handle the event */ - private _touchActive(tab) { + private _touchActive(tab: Tab) { let active = tab.getActive(); if (!active) { @@ -338,7 +338,7 @@ export class Tabs extends Ion { * within a NavController. * @returns {NavController} */ - get rootNav() { + get rootNav(): NavController { let nav = this.parent; while (nav.parent) { nav = nav.parent; diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts index 725fe6bff7..85361cc40c 100644 --- a/ionic/components/tabs/test/advanced/index.ts +++ b/ionic/components/tabs/test/advanced/index.ts @@ -1,7 +1,7 @@ import {ViewChild} from 'angular2/core'; import {RouteConfig, Location} from 'angular2/router'; -import {App, Page, NavController, Modal, ViewController, Tabs} from '../../../../../ionic/ionic'; +import {App, Page, NavController, NavParams, Modal, ViewController, Tabs} from '../../../../../ionic/ionic'; @Page({ @@ -27,12 +27,12 @@ import {App, Page, NavController, Modal, ViewController, Tabs} from '../../../.. ` }) class SignIn { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} push() { - this.nav.push(TabsPage); + this.nav.push(TabsPage, { + userId: 8675309 + }); } } @@ -48,9 +48,7 @@ class SignIn { ` }) class ChatPage { - constructor(viewCtrl: ViewController) { - this.viewCtrl = viewCtrl; - } + constructor(private viewCtrl: ViewController) {} } @@ -60,8 +58,9 @@ class ChatPage { class TabsPage { @ViewChild(Tabs) tabs: Tabs; - constructor(private nav: NavController) { + constructor(private nav: NavController, private params: NavParams) { this.tab1Root = Tab1Page1; + this.tab1Params = params; this.tab2Root = Tab2Page1; this.tab3Root = Tab3Page1; } @@ -98,14 +97,16 @@ class TabsPage { '

' + '

' + '

' + + '

UserId: {{userId}}

' + '' + '' + '' }) class Tab1Page1 { - constructor(nav: NavController, tabs: Tabs) { - this.nav = nav; - this.tabs = tabs; + userId: string; + + constructor(private nav: NavController, private tabs: Tabs, private params: NavParams) { + this.userId = params.get('userId'); } push() { @@ -135,9 +136,7 @@ class Tab1Page1 { '' }) class Tab1Page2 { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} push() { this.nav.push(Tab1Page3) @@ -157,9 +156,7 @@ class Tab1Page2 { '' }) class Tab1Page3 { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} } @@ -179,9 +176,7 @@ class Tab1Page3 { '' }) class Tab2Page1 { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} push() { this.nav.push(Tab2Page2) @@ -202,9 +197,7 @@ class Tab2Page1 { '' }) class Tab2Page2 { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} push() { this.nav.push(Tab2Page3) @@ -224,9 +217,7 @@ class Tab2Page2 { '' }) class Tab2Page3 { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(private nav: NavController) {} } diff --git a/ionic/components/tabs/test/advanced/tabs.html b/ionic/components/tabs/test/advanced/tabs.html index 77f729032e..d104d78062 100644 --- a/ionic/components/tabs/test/advanced/tabs.html +++ b/ionic/components/tabs/test/advanced/tabs.html @@ -1,6 +1,6 @@ - + diff --git a/ionic/decorators/app.ts b/ionic/decorators/app.ts index bf016d577b..07a81afaf9 100644 --- a/ionic/decorators/app.ts +++ b/ionic/decorators/app.ts @@ -62,7 +62,7 @@ export interface AppMetadata { * @property {string} [template] - the template to use for the app root. * @property {string} [templateUrl] - a relative URL pointing to the template to use for the app root. */ -export function App(args: AppMetadata) { +export function App(args: AppMetadata={}) { return function(cls) { // get current annotations