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

Question

我希望有人可以帮助我

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

这是父组件。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);

  }

  newMessage() {
    this.shareSvc.nextMessage("I am from page 2")
  }


}

如果需要，我将把我的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

Answer 1

实际上您有两个问题，为什么您什么都没得到

1. 您的第一条消息（我来自home.ts）是在您订阅可观察对象之前发出的。这就是为什么你不明白的原因
2. 您的第二条消息的发送和订阅已正确完成，但您从未调用过newMessage方法。这就是为什么您没有收到第二条消息的原因。

[请看一下-我做了一个小的demonstrating example，所以您可以看到我在说什么

Answer 2

尝试一下。加载模板后，可能尚未从服务中获取消息。

<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>