Ionic 2では、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ビューでそれを使用したい：私はそれをconsole.logとき

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

は、これは私にundefinedを与えます。手伝ってください。

Answer 1

このビデオで覆われているイオン内のページ間でデータを渡すために、いくつかの異なる方法があります：https://www.youtube.com/watch?v=T5iGAAypGBA

簡潔にするために、私はここでしかこれらのいずれかの方法をカバーします：それはあなたがしたい何かあれば複数のページの間に存続する場合は、Ionic 2プロバイダーを介して行うことができます。

あなたは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/tsの

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() { 

    } 
} 

あなたはこれを試してみることができます。