Как установить данные в сервис и получить на другой странице Ioni c 4/5 - PullRequest
Новая
       85

Как установить данные в сервис и получить на другой странице Ioni c 4/5

1 голос
/ 17 июня 2020

Надеюсь, кто-то может мне помочь

Я хочу отправить данные с одной страницы, а затем использовать их на другой странице из службы.

Это родительский компонент. 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);

  }




}

Если необходимо , я отправлю свою страницу 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>

вот результат: введите описание изображения здесь

Ответы [ 3 ]

1 голос
/ 17 июня 2020

На самом деле, у вас есть две проблемы, из-за которых вы не видите ни одного из ваших сообщений.

  1. Ваше первое сообщение («Я из home.ts») отправляется до того, как вы подписываетесь на наблюдаемый объект. Вот почему вы его не получаете
  2. Отправка второго сообщения и подписка выполнены правильно. Однако вы никогда не вызываете метод newMessage . Вот почему вы не получаете это второе сообщение.

Пожалуйста, посмотрите - я сделал небольшой демонстрационный пример , чтобы вы могли понять, о чем я говорю .

PS Кстати, ваш код можно было бы немного упростить, используя канал async и убрав ненужное преобразование BehaviorSubject в простой Observable. См. Пример здесь .

Обновление

Я бы хотел что-то вроде этого: 112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/ wp-content /… Но, только мне нужна связь между родственными компонентами ... Используя 3 компонента (Home.ts, Page2.ts и Service)

Тогда ваше решение может выглядеть как следует . Просто внедрите свой сервис во все необходимые вам компоненты и используйте его метод для отправки сообщений и его свойство message для подписки на предстоящие сообщения.

0 голосов
/ 18 июня 2020

Вместо того, чтобы объявлять behaviorSubject как частный, вы должны объявить его publi c .. 

public message = new BehaviorSubject({});

, а затем использовать message.next(value); из любого места вашего приложения, импортировав службу ..

вы можете подписаться на это, message.subscribe() или получить одноразовое значение message.getValue() или в html использовать asyn c pipe

Это вам не нужно sharedMessage = this.message.asObservable();

0 голосов
/ 17 июня 2020

Попробуйте это. Когда шаблон загружается, возможно, сообщение еще не получено из службы. И, кроме того, вы должны вызвать 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');
  }
...