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

Question

希望有人能帮助我

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

这是父级 component.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);

  }




}

如果需要，我会post我的第2页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

Answer 1

实际上，您有两个问题导致您看不到任何消息

您的第一条消息 ("I am from home.ts") 在您订阅可观察对象之前发出。这就是你不明白的原因
您的第二条消息发送和订阅已正确完成。但是，您 永远不会调用 newMessage 方法 。这就是您没有收到第二条消息的原因。

请看一下 - 我做了一个小 demonstrating example 这样你就可以明白我在说什么了。

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

更新

I would like something like this: 112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/… But, only i want a communication between sibling components... Using 3 components (Home.ts, Page2.ts and Service)

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

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

Answer 3

与其将 behaviorSubject 声明为私有，不如将其声明为 public..

public message = new BehaviorSubject({});

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

你可以订阅这个，message.subscribe() 或获取一次值 message.getValue() 或者在 html 使用异步管道

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

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

How to set data into a service and the get in another page Ionic 4/5

angular

typescript

ionic-framework

ionic4

ionic5