ionic pass an object to another tab

Question

HomePage(Tab 1). This is where I would like the user to click an option from a list of objects

@Component({
      selector: 'page-home',
      templateUrl: 'home.html',
      providers: [Data]
    })
    export class HomePage {
          constructor(public navCtrl: NavController,public navParams: NavParams, public dataService: Data, public nativeStorage: NativeStorage) {
      }
      postTapped(card:any){
    this.dataService.setSelectedCard(card);
         console.log(card);  
    this.navCtrl.parent.select(1);
}
    addPost(){
        this.navCtrl.push(PostPage);
}

Detail Page tab 2. This is the target page where I would like to send an object

    @Component({
          selector: 'page-detail',
          templateUrl: 'detail.html',
        })
        export class DetailPage {
    card:any;
  constructor(public navCtrl: NavController, dataService: Data, public navParams: NavParams, ) {
      console.log(this.card);  
      this.card= dataService.getSelectedCard();
    }
}

This is the provider called Data to store object, I tried to store the object in this service, but the object ends up empty by the time it gets to the next tab page

    @Injectable()
export class Data {
    selectedCard: any;
    data: any;
    posts: FirebaseListObservable<any[]>;

    constructor(public db: AngularFireDatabase) {
    this.posts = db.list('/posts');
    }

    setSelectedCard(selectedCard:any){
        this.selectedCard=selectedCard;
    }
    getSelectedCard(){
        return this.selectedCard;
    }
}

I have looked thoroughly through posts and cannot find anything to fix my problem, any help would be much appreciated

Answer 1

The reason you are not able to get the data from provider is that the provider instance is local to your component class.

The provider can be added in one of two ways. It can be added to an individual component like this:

@Component({
    template: `<p>Hey!</p>`,
    providers: [MyService]
})

or it can be added globally to the application when bootstrapping in the root component (app.module.ts):

    @NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    Data
  ]
})
export class AppModule {}

Which of these two you choose can matter a great deal. If you add it to the bootstrap then a single instance of the service will be created that all components in the application will share – making it a great way to share data between components. If you add the provider to an individual component, then a new instance will be created for just that one component.

In your case, since you have added into your component and trying to get it into your another component that's why you are not getting the data. In order to resolve it you need to make your provider a global one.