Pass data from one component to another in angular

Asked

Viewed 395 times

2

I have a component that shows an image and another component that should change the src of that image.

This is what I tried to do:

Profile.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) => {
      })
    }

Profile.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
   })
  }
angular typescript

  • Where are you calling the altered methodFotoPerfil?

  • It’s in a function, I know it’s coming into this function because if I put a console.log('test') is printed at the right time, but for some reason subscribe doesn’t get the change

  • You are using the Subject?

  • Yes, no perfilService I declared: fotoPerfil: Subject<any> = new Subject<any>();

  • Are you not calling the unsubscribe somewhere before?

  • i do not use unsubscribe

  • Adds all your code involved in the problem.

  • Which module is the Service?

  • I changed the question by adding all the code

  • The service is imported and added in the providers of the two modules (Homecomponent which is the component that should receive the profile photo and the Profile component that should send the data to the homeComponent)

  • 1

    Remove the service from both and place only in the providers of the root module of your application

  • Did it work, any explanation for it? Add an answer explaining so I can give as the correct answer.

  • Yes, just a moment

Show 8 more comments

1 answer

2


At Angular we have the Injector which is responsible for creating the service and injecting it into the components. The whole service is a Singleton for the Injector. When you add the service in the main module, you are registering the service in the application’s root Injector, that is, there is only one Profile Service for the entire application, all components will get the same instance, unless the service is registered in some child module or component, as was the case with the problem mentioned in the comments, where each component had a different instance of the service.

I recommend reading: https://angular.io/guide/dependency-injection

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.