在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); 
    } 

} 

Hope这有帮助！

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

    } 
} 

你可以试试这个。