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

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

  }
}

你可以尝试一下。

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

2 个答案: