feat(tabs): rootParams, pass params to tabs

Closes #5172
ionic-team · Feb 15, 2016 · e06cf71 · e06cf71
1 parent a76808b
commit e06cf71
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 51 deletions.
diff --git 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<any> = 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
@@ -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<any> = new EventEmitter();
+  @Output() select: EventEmitter<Tab> = 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,15 +221,15 @@ export class Tab extends NavController {
   /**
    * @private
    */
-  setSelected(isSelected) {
+  setSelected(isSelected: boolean) {
     this.isSelected = isSelected;
     this.hideNavbars(!isSelected);
   }
 
   /**
    * @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
@@ -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,17 +269,17 @@ 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];
     }
     return null;
   }
 
   /**
-   * @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
@@ -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 {
       '<p><button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>' +
       '<p><button (click)="logout()">Logout</button></p>' +
       '<p><button (click)="favoritesTab()">Favorites Tab</button></p>' +
+      '<p>UserId: {{userId}}</p>' +
       '<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>' +
     '</ion-content>'
 })
 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 {
     '</ion-content>'
 })
 class Tab1Page2 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
+  constructor(private nav: NavController) {}
 
   push() {
     this.nav.push(Tab1Page3)
@@ -157,9 +156,7 @@ class Tab1Page2 {
     '</ion-content>'
 })
 class Tab1Page3 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
+  constructor(private nav: NavController) {}
 }
 
 
@@ -179,9 +176,7 @@ class Tab1Page3 {
     '</ion-content>'
 })
 class Tab2Page1 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
+  constructor(private nav: NavController) {}
 
   push() {
     this.nav.push(Tab2Page2)
@@ -202,9 +197,7 @@ class Tab2Page1 {
     '</ion-content>'
 })
 class Tab2Page2 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
+  constructor(private nav: NavController) {}
 
   push() {
     this.nav.push(Tab2Page3)
@@ -224,9 +217,7 @@ class Tab2Page2 {
     '</ion-content>'
 })
 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
@@ -1,6 +1,6 @@
 
 <ion-tabs preloadTabs="false" (change)="onTabChange()">
-  <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="tab1Params"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
   <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (select)="chat()"></ion-tab>

diff --git 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