Apparently you are dealing with login event. In this case, it is advisable to use the Guard. More details here.
Anyway, to communicate between two Components you can create an intermediate service. For example, create the 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);
}
}
There in 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);
}
And finally, in the app.componentts.:
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;
});
}
I created 2 services because their code was like this, but I believe that only 1 service could send the user and image data, making everything much simpler. Anyway, this should work, but it is also suggested to use the Guards to protect the routes of your application.
And you can also consult here for more details on communication between componenetes.
Thank you, I solved the problem with a single service, but within what you put.
– Murilo