0

Estou migrando um projeto do ionic 3.2 para o 5.14, e estou com dificuldades para usar observables em vez de events.

No código original, após o usuário logar, eu alterava o nome e a imagem do sidemenu através de events:

login.pages.ts

this.events.publish('user:login', this.nomePrimeiro, Date.now());
this.events.publish('image:login', this.imagem, Date.now());

e no app.component.ts eu coloquei isto:

events.subscribe('user:login', (user, time) => {
  Global.nomePrimeiro = user;
});

events.subscribe('image:login', (image, time) => {
  Global.imagem = image;
});

Como fazer o mesmo com Observables?

1 Resposta 1

1

Aparentemente você está lidando com evento de login. Nesse caso, o aconselhável é utilizar o guard. Mais detalhes aqui.

De toda forma, para fazer a comunicação entre dois components você pode criar um serviço intermediário. Por exemplo, crie o login.service.ts:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class LoginService {

  // Observable string sources
  private userSource = new Subject<string>();
  private imageSource = new Subject<string>();

  // Observable string streams
  user$ = this.userSource.asObservable();
  image$ = this.imageSource.asObservable();

  // Service message commands
  anunciarUsuario(user) {
    this.userSource.next(user);
  }

  anunciarImagem(image) {
    this.imageSource.next(image);
  }
}

Aí na login.pages.ts:

constructor(private userService: UserService) {}

anunciarUsuario() {
    let usuario = { user: this.nomePrimeiro, time: Date.now() };
    this.userService.anunciarUsuario(usuario);
  }

anunciarImagem() {
    let image = { image: this.imagem, time: Date.now() };
    this.userService.anunciarImagem(imagem);
  }

E por fim, no app.component.ts:

  userSubscription: Subscription;
  imageSubscription: Subscription;


  constructor(private loginService: LoginService) {
    this.userSubscription = loginService.user$.subscribe(
      user => {
        Global.nomePrimeiro = user.user;
    });
    this.imageSubscription = loginService.image$.subscribe(
      image => {
        Global.imagem = image.image;
    });
  }

Eu criei 2 serviços porque seu código estava assim, mas acredito que apenas 1 serviço poderia mandar os dados de usuário e de imagem, deixando tudo bem mais simples. De toda forma, isso deve funcionar, mas fica ainda a sugestão de utilizar os guards para proteger as rotas da sua aplicação.

E também pode consultar aqui para mais detalhes sobre a comunicação entre componenetes.

1
  • Obrigado, resolvi o problema com um único service, mas dentro do que você colocou.
    – Murilo
    25/05/2020 às 13:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .