2

Tenho um componente que mostra uma imagem e um outro componente que deve alterar o src dessa imagem.

Tentei fazer o seguinte:

Perfil.component.ts

 alteraDadosPerfil(){

    this.perfilService.alteraDadosPerfil(this.perfil,this.croppedImage)
      .pipe(
        take(1)
      )
      .subscribe((res) => {

        if(this.croppedImage != null){ //Se foi alterado imagem então guarda a foto no localstorage e chama o método do serviço que altera a foto de perfil
          localStorage.setItem('foto', this.croppedImage);
          this.perfilService.alteraFotoPerfil(this.croppedImage);
        }
      },
      (err: HttpErrorResponse) => {
      })
    }

Perfil.service.ts

fotoPerfil: Subject<any> = new Subject<any>();

  alteraFotoPerfil(base64Foto: string){
    this.fotoPerfil.next(base64Foto);
  }

Home.component.ts

avatarPerfil: string = null;

 ngOnInit(){

    this.avatarPerfil = localStorage.getItem('foto');
    this.nomeUsuarioLogado = localStorage.getItem('nome');
    this.emailUsuarioLogado = localStorage.getItem('emailUsuario');

    this.perfilService.fotoPerfil.subscribe(res => { //Não está entrando aqui dentro
      this.avatarPerfil = res
   })
  }
13
  • Onde você está chamando o método alteraFotoPerfil?
    – renanvm
    10/01/2019 às 10:48
  • É em uma função, eu sei que está chegando nessa função porque se eu colocar um console.log('teste') é printado no momento correto, mas por algum motivo o subscribe não recebe a alteração 10/01/2019 às 10:51
  • Você está usando o Subject?
    – renanvm
    10/01/2019 às 10:55
  • Sim, no perfilService eu declarei: fotoPerfil: Subject<any> = new Subject<any>(); 10/01/2019 às 10:57
  • 1
    Remova o serviço de ambos e coloque somente no providers do módulo raiz da sua aplicação
    – renanvm
    10/01/2019 às 11:13

1 Resposta 1

2

No Angular temos o Injector que é responsável por criar o serviço e injetá-lo nos componentes. Todo o serviço é um singleton para o Injector. Quando você adiciona o serviço no módulo principal, você está registrando o serviço no Injector raiz da aplicação, ou seja, há somente um PerfilService para toda a aplicação, todos os componentes irão obter a mesma instância, a não ser que o serviço seja registrado em algum módulo filho ou componente, como o foi o caso do problema mencionado nos comentários, onde cada componente tinha uma instância diferente do serviço.

Recomendo a leitura: https://angular.io/guide/dependency-injection

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 .