时间戳

首页 > 解决方案 > 如何将数据设置到服务中并进入另一个页面 Ionic 4/5

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

问题描述

我希望有一个人可以帮助我

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

这是父组件.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>

结果如下： 在此处输入图像描述

标签： angulartypescriptionic-frameworkionic4ionic5

解决方案

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

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

请看一下 - 我已经做了一个小的演示示例，这样你就可以看到我在说什么。

PS 顺便说一句，您的代码可以使用async管道简化一点，并删除不必要的转换 BehaviorSubject 到一个简单的 Observable。请参阅此处的示例。

更新

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

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

推荐阅读