1
votes

Comment définir des données dans un service et accéder à une autre page Ionic 4/5

J'espère que quelqu'un pourra m'aider

Je souhaite envoyer des données à partir d'une page, puis les utiliser dans une autre page à partir d'un service.

Ceci est le composant parent.ts

XXX

Ceci est mon service

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

Et enfin, c'est mon dernier composant où je veux obtenir les données de la maison / service p>

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

  }




}

Si nécessaire, je publierai ma page2 html:

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

voici le résultat: entrez la description de l'image ici

typescript angular ionic-framework ionic4 ionic5

1 commentaires

Est-ce que cela répond à votre question? Ionic 3 - Envoi de données au service à partir du composant

3 Réponses :

1
votes

En fait, vous rencontrez deux problèmes qui vous empêchent de voir l'un de vos messages

Votre premier message ("Je viens de chez moi.ts") est émis avant que vous ne vous abonniez à un observable. C'est pourquoi vous ne comprenez pas
L'émission de votre deuxième message et l'inscription se font correctement. Cependant, n'appelez jamais la méthode newMessage . C'est pourquoi vous ne recevez pas ce deuxième message.

S'il vous plaît, jetez un œil - j'ai créé un petit exemple de démonstration pour que vous puissiez voir de quoi je parle.

P.S. En passant, votre code pourrait être un peu simplifié en utilisant le tube async et en supprimant la transformation inutile de BehaviorSubject en un simple Observable. Consultez l'exemple ici . < / p>

<❯Mise à jour

Je voudrais quelque chose comme ceci: 112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/... Mais, seulement je veux une communication entre les composants frères ... En utilisant 3 composants (Home.ts, Page2.ts et Service)

Votre solution pourrait alors ressembler à comme suit . Injectez simplement votre service dans tous les composants dont vous avez besoin et utilisez sa méthode pour envoyer des messages et sa propriété de message pour vous abonner aux messages à venir.

3 commentaires

J'ai compris mais, dans votre exemple, vous n'utilisez qu'un seul composant, je m'excuse si je ne me suis pas bien expliqué. mon but est de créer une fonction set et une fonction get en service.Dans home.ts, je veux envoyer des données de valeur en utilisant la fonction set, puis dans mon pagina2.ts obtenir les données de valeur du service qui seraient la même valeur extraite de home. ts.

Je ne suis pas sûr d'avoir ce que tu veux. En fait, si vous regardez mon premier exemple - c'est presque du copier-coller du vôtre, et il a deux composants - app.component et hello.component . Ce serait formidable si vous fournissiez un exemple minimal reproductible ici afin que je puisse mieux vous aider

J'aimerais quelque chose comme ceci:

0
votes

Essayez ceci. Lorsque le modèle se charge, le message n'a peut-être pas encore été extrait du service. Et, aussi, vous devez appeler le newMessage onInit, ou l'assigner sur un événement de clic

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

0 commentaires

0
votes

Plutôt que de déclarer le behaviorSubject comme privé, vous devez le déclarer public ..

public message = new BehaviorSubject({});

puis, utiliser message.next (valeur); de n'importe où dans votre application en important le service.

vous pouvez vous abonner à ceci, message.subscribe () ou obtenir une valeur unique message.getValue () ou en html, utilisez un tube asynchrone

Vous n'avez pas besoin de ce sharedMessage = this.message.asObservable ();

0 commentaires