在 Ionic 2 中，如何在两个组件之间传递属性数据？

Question

我有一个具有title 属性的CheckIn 页面。

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>

当我console.log 时，这给了我undefined。请帮忙。

Answer 1

尝试将页面分配给构造函数之外的每个选项卡。 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() {

  }
}

你可以试试这个。

Answer 2

在 Ionic 中，有几种不同的方法可以在页面之间传递数据，本视频介绍了这些方法：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() {
  } 

}

在你想使用provider的组件中，确保你导入它，并注入到构造函数中：

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

}

希望有帮助！