Подтвердить что ты не робот

Ионные 2, проходящие вкладки NavParams на вкладку

Я начинаю создавать свое первое приложение, используя Ionic 2, и через много проб и ошибок дошло до того, что ни один из поисковиков Google не может найти что-то, что могло бы помочь.

Я пытаюсь передать некоторые NavParams на вкладку. NavParams доступны на странице родительских вкладок:

@Page({
    templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor(params: NavParams) {

      this.params = params;
      console.log(this.params); // returns NavParams {data: Object}

      // this tells the tabs component which Pages should be each tab root Page
      this.tab1Root = Tab1;
      this.tab2Root = Tab2;
      this.tab3Root = Tab3;
    }
}

Но я не могу получить NavParams в самой вкладке:

@Page({
    templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
    constructor(nav: NavController, params: NavParams, platform: Platform) {
        this.nav = nav;
        this.params = params;
        this.platform = platform;

        console.log(this.params); // returns NavParams {data: null}
    }
}

Я просто не совсем уверен, как передать параметры со страницы вкладок на саму вкладку или как-то запросить параметр у родительского элемента вкладки. Я предполагаю что-то вроде:

this.tab1Root = Tab1(this.params);

Любая помощь будет принята с благодарностью!

4b9b3361

ОТВЕТЫ

Ответ 1

Этому вопросу несколько недель, поэтому вы, возможно, уже нашли ответ. Эта функция была добавлена в феврале: https://github.com/driftyco/ionic/issues/5475.

Взяв код с вашей исходной вкладки, допустим, что параметр передается на "родительскую" вкладку, и мы хотим сохранить его в свойстве с именем fooId (это может быть объект, или просто целое или строковое значение, что угодно ):

@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {
  constructor(params: NavParams) {

      this.params = params;
      console.log(this.params); // returns NavParams {data: Object}
      this.fooId = this.params.data;

      // this tells the tabs component which Pages should be each tab root Page
      this.tab1Root = Tab1;
      this.tab2Root = Tab2;
      this.tab3Root = Tab3;
    }
}

Затем в tabs.html, вы можете ссылаться на него, как это, используя rootParams атрибут (rootParams упоминается в documenation здесь):

<ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab>
</ion-tabs>

Затем на странице Tab1 вы можете ссылаться на ваши NavParams, как и на любую другую страницу, и значение, переданное для foodId будет там.

Ответ 2

Для тех, кто еще не понял...

Я много искал, и только я получил только использование собственного хранилища или использование службы или хранилища сеансов... но это было не то, что я хотел... Итак, Если у вас есть данные в NavParams на странице Tabs.ts и вам нужно передать как [rootParam] в соответствующие вкладки... то, что вам нужно сделать, это вместо назначения NavParams переменной на странице Tabs.ts, что вы можете сделать, это привязать ее непосредственно к [rootParams] на странице HTML, Как..

tabs.ts

constructor(public navParams: NavParams) { }

tabs.html

<ion-tab [root]="tab1Root" [rootParams]="navParams.get('single')" tabTitle="Customer"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="navParams.get('second')" tabTitle="Map"></ion-tab>

Или

tabs.html

 <ion-tab [root]="tab1Root" [rootParams]="navParams.data" tabTitle="Customer"></ion-tab>

tab1.ts

constructor( public navParams: NavParams) {}

ionViewDidLoad() {
  console.log('ionViewDidLoad tab1Page');
  console.log(this.navParams.data);
}

Ответ 3

Нет прямого способа передать параметры в закладках, о которых я знаю.

Я думаю, что вы можете поиграть с NavController, чтобы заставить его работать.

Удобный обходной путь - поместить параметр во внедренный сервис: app/services/params.js:

import {Injectable} from 'angular2/core';

@Injectable()
export class Params{
    constructor(){
        console.log("Params()");  
        this.params={};
    }
}

и в контроллере:

    import {Params} from '../../services/params'

    @Page({
      templateUrl: 'build/pages/home/home.html',
    })
    export class XYPage{

    constructor(nav: NavController,platform: Platform, params: Params) {
       console.log("XYPage()",this);
       console.log("XYPage()", params.params);
       params.params={id="001"};

не забудьте добавить сервис в свой @App

Ответ 4

Я пробовал много методов, но ни один из них не помог мне. Поскольку в моем приложении не было много сложностей, я реализовал его с использованием ионного собственного хранилища плагин. В случае запуска новой вкладки я сохраню некоторую переменную в собственном хранилище (сниппет будет выглядеть следующим образом).

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

На странице конструктора или ionviewdidload следующей закладки я буду проверять эту переменную и выполнять необходимые действия. Snippet выглядит следующим образом.

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

Примечание.. Это подходит только для небольшого приложения или там, где требуется передача ограниченного набора переменных. Если есть много переменных, это может занимать больше места в кеше приложений, что может снизить производительность приложения.

Ответ 5

tabs.html - добавить [rootParams] = "paramName"; на вкладку, которую вы хотите передать данные

<ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="tab2Root"></ion-tab>
    <ion-tab tabTitle="Tab3" [root]="tab3Root"></ion-tab>
</ion-tabs>

tabs.ts - установить ключ и данные

export class TabsPage {
  this.tab1Root = Tab1;
  this.tab2Root = Tab2;
  this.tab3Root = Tab3;

  fooId: {
    firstName: "lawlesscreation",
    email: "[email protected]",
    score: number // can also set it later in the constructor
  }

  constructor() {
    let score = getScore(); //some method to get score
    this.fooId.score = score;
  }
}

страница tab1 - импортируйте NavParams и используйте this.navParams.get (ключ) для получения данных

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class Tab1 {
  firstName = this.navParams.get('firstName');
  score = this.navParams.get('score');
  userEmail = this.navParams.get('email');

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}