如何将数据设置到服务中并进入另一个页面 Ionic 4/5

Posted 2023-03-13

【中文标题】如何将数据设置到服务中并进入另一个页面 Ionic 4/5

【英文标题】：How to set data into a service and the get in another page Ionic 4/5

【发布时间】：2020-10-06 20:42:45

【问题描述】：

希望有人能帮助我

我想从一个页面发送数据，然后在服务的另一个页面中使用它。

这是父组件.ts

import  Component  from '@angular/core';
import  ShareService  from '../share.service';



@Component(
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
)
export class HomePage 
  message:string = 'I am from home.ts';

  constructor( private shareSvc: ShareService ) 

  ngOnInit() 
    this.shareSvc.sharedMessage.subscribe(message => this.message = message)


  

这是我的服务

import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs';
@Injectable(
  providedIn: 'root'
)
export class ShareService 
  private message = new BehaviorSubject<any> (null) ;
  sharedMessage = this.message.asObservable();

  constructor()  

  nextMessage(message: string) 
    this.message.next(message)
  

最后，这是我想从家庭/服务获取数据的最后一个组件

import  Component, OnInit  from '@angular/core';
import  ShareService  from '../share.service';



@Component(
  selector: 'app-pagina2',
  templateUrl: './pagina2.page.html',
  styleUrls: ['./pagina2.page.scss'],
)
export class Pagina2Page implements OnInit 

  message:string;

  constructor( private shareSvc: ShareService)  

  ngOnInit() 

    this.shareSvc.sharedMessage.subscribe(message => this.message = message)

    console.log(this.message);

  

如果有必要，我会发布我的 page2 html：

<ion-header>
  <ion-toolbar>
    <ion-title>pagina2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h1>Message from Service and Home : message</h1>


</ion-content>

这是结果： enter image description here

【问题讨论】：

这能回答你的问题吗？ Ionic 3 - Sending data to service from component

【参考方案1】：

实际上，您有两个问题会阻止您看到任何消息

您的第一条消息（“我来自 home.ts”）在您订阅 observable 之前发出。这就是你不明白的原因 您的第二条消息发出和订阅已正确完成。但是，您从不调用newMessage 方法。这就是您没有收到第二条消息的原因。

请看一下 - 我制作了一个小号demonstrating example，这样你就可以看到我在说什么了。

附：顺便说一句，您的代码可以使用async 管道简化一点，并删除不必要的将 BehaviorSubject 转换为简单的 Observable。请参阅示例here。

更新

我想要这样的东西：112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/... 但是，只有我想要兄弟组件之间的通信...使用 3 个组件（Home.ts、Page2.ts 和服务）

那么您的解决方案可能看起来像as follows。只需将您的服务注入您需要的所有组件中，并使用其发送消息的方法和它的 message 属性来订阅即将发送的消息。

【讨论】：

我理解，但是在您的示例中，您只使用了一个组件，如果我没有很好地解释自己，我深表歉意。我的目的是在服务中创建一个 set 函数和一个 get 函数。在 home.ts 中，我想使用 set 函数发送值数据，然后在我的 pagina2.ts 中获取服务的值数据，这与从家中获取的值相同。 ts。

我不确定我能得到你想要的。实际上，如果您看一下我的第一个示例 - 它几乎是您的示例的复制粘贴，它有两个组件 - app.component 和 hello.component。如果您提供一些最小的可重复示例 here 会很棒，这样我可以更好地帮助您

我想要这样的东西：112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/… 但是，只有我想要兄弟组件之间的通信...使用 3 个组件（Home.ts、Page2.ts 和 Service）

【参考方案2】：

试试这个。加载模板时，可能尚未从服务中获取消息。而且，您还必须调用 newMessage onInit，或将其分配给单击事件

<ion-header>
  <ion-toolbar>
    <ion-title>pagina2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="message">
  <h1>Message from Service and Home : message</h1>
</ion-content>

 **pagina.ts**



    ngOnInit() 
    this.shareVc.sharedMessage.subscribe(message => 
      this.message = message;
    );
    this.newMessage();
  

  newMessage() 
    this.shareVc.nextMessage('I am from page 2');
  

【参考方案3】：

而不是将行为主题声明为私有，您应该将其声明为公开..

public message = new BehaviorSubject();

然后，通过导入服务在您的应用中的任何位置使用message.next(value);..

您可以订阅此，message.subscribe() 或获取一个时间值message.getValue() 或在 html 中使用异步管道

你不需要这个sharedMessage = this.message.asObservable();