离子将对象传递给另一个选项卡

时间:2017-07-14 13:47:20

标签: angular ionic-framework ionic3

主页(标签1)。这是我希望用户从对象列表中单击选项的地方

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

详细信息页面标签2.这是我想要发送对象的目标页面

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

这是名为Data to store object的提供程序,我试图将该对象存储在此服务中,但该对象在到达下一个标签页时结束为空

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

我已经仔细查看了帖子,找不到任何可以解决我的问题的内容,我们非常感谢任何帮助

1 个答案:

答案 0 :(得分:0)

您无法从提供程序获取数据的原因是提供程序实例是组件类的本地实例。

可以通过两种方式之一添加提供程序。它可以添加到单个组件中,如下所示:

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

或者在根组件(app.module.ts)中引导时可以全局添加到应用程序中:

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

您选择的这两个中的哪一个可能非常重要。如果将其添加到引导程序中,则将创建该应用程序中所有组件将共享的单个服务实例 - 这使其成为在组件之间共享数据的好方法。如果将提供程序添加到单个组件,则将仅为该组件创建新实例。

在您的情况下,因为您已添加到组件中并尝试将其添加到您的另一个组件中,这就是您无法获取数据的原因。为了解决这个问题,您需要使您的提供商成为全球提供商。

相关问题