В Ionic 2, как передать данные атрибута между двумя компонентами?

Question

У меня есть страница CheckIn, которая имеет атрибут title.

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

@Component({ 
    templateUrl: 'check-in.html' 
}) 
export class CheckInPage { 

    public title: string = 'Check In'; 
    constructor(public navCtrl: NavController) { 
    } 
} 

импортировать эту страницу в моем TabsPage:

import { Component } from '@angular/core'; 
import { CheckInPage } from '../check-in/check-in'; 

@Component({ 
    templateUrl: 'tabs.html', 
}) 
export class TabsPage { 

    public tab3Root: any; 

    constructor() { 
    this.tab3Root = CheckInPage; 
    } 
} 

А теперь, я хочу использовать его на мой взгляд TabsPage:

<ion-tabs> 
    <ion-tab [root]="tab3Root" tabTitle="{{tab3Root.title}}" tabIcon="cog"></ion-tab> 
</ion-tabs> 

Это дает мне undefined, когда я console.log его , Пожалуйста помогите.

Answer 1

Есть несколько различных способов передачи данных между страницами в ионическом, которые покрыты в этом видео: https://www.youtube.com/watch?v=T5iGAAypGBA

Для краткости я буду только покрыть один из этих способов здесь: если это то, что вы хотите сохраняйте между несколькими страницами, которые вы можете сделать с помощью Ionic 2 Provider.

Вы можете создать поставщика в CLI:

ionic g provider DemoProvider 

Он будет генерировать поставщика, который вы можете добавить переменные, как это:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

/* 
    Generated class for the DemoProvider provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class DemoProvider { 

    mySharedVariable: String = "Hello"; 

    constructor() { 
    } 

} 

В компоненте, где вы хотите использовать поставщик, убедитесь, что вы импортируете его, и введите его в конструктор:

import { Component } from '@angular/core'; 
import { DemoProvider } from '../../providers/demoProvider'; 

@Component({ 
    selector: 'page-tabs', 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    constructor(public demoProvider:DemoProvider) { 

    } 
    ionViewWillEnter(){ 
     console.log(demoProvider.mySharedVariable); 
    } 

} 

Надежда что помогает!

Answer 2

Попробуйте назначить страницу каждой вкладке вне конструктора. https://ionicframework.com/docs/v2/api/components/tabs/Tab/

HTML

<ion-tabs> 
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab> 
</ion-tabs> 

JS/ц

import { ChatPage } from '../chat/chat'; 

@Component({ 
    templateUrl: 'build/pages/tabs/tabs.html' 
}) 

export class Tabs { 
    // here we'll set the property of chatRoot to 
    // the imported class of ChatPage 
    chatRoot = ChatPage; 

    constructor() { 

    } 
} 

Вы можете это попробовать дать.