0

Estou tentando esconder uma Navbar e mostrar somente depois que eu autenticar o usuário, estou usando *ngIf e usando um EventEmitter para retornar um valor boleano, eu inicializei uma variável chamada mostrarMenu no meu app.component como false, porém ela não está recebendo o valor que vem do login.service ou seja, mesmo depois de autenticar ela não está aparecendo.

import { Injectable, EventEmitter } from '@angular/core';
import { Router } from "@angular/router";
import { Observable, BehaviorSubject } from 'rxjs';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable()
export class LoginService {

mostrarMenuEmitter = new EventEmitter<boolean>();

user: Observable<firebase.User>;
constructor(private router: Router, public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
}

public login(mail: string, password: string) {

    return new Promise((resolve, reject) => {

        this.afAuth.auth.signInWithEmailAndPassword(mail, password).then((user) => {

            localStorage['user'] = mail;
            this.mostrarMenuEmitter.emit(true);
            this.router.navigate(['/sistema/cliente']);
            console.log(user);


        })
            .catch((error) => {
                console.log(error);
                this.router.navigate(['/login']);

            });
    })
        .catch((error) => {
            console.log(error);
            this.router.navigate(['/login']);

        });
}

public logout() {
    return this.afAuth.auth.signOut();
}


}

import { OnInit, Component } from '@angular/core';
import { LoginService } from './login/login.service';
import { Observable } from 'rxjs';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'sistemang';

mostrarMenu: boolean = false;

constructor(private loginService: LoginService) {

}

ngOnInit() {
this.receberValor
}

receberValor(valor: boolean){

this.loginService.mostrarMenuEmitter.subscribe(
  valor => this.mostrarMenu = valor
)

}
}

<nav *ngIf="mostrarMenu" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#" routerLink="/sistema/cliente" routerLinkActive="active">Cliente</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" routerLink="/sistema/produto" routerLinkActive="active">Produto</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" routerLink="/sistema/carro" routerLinkActive="active">Carro</a>
      </li>
  </ul>
</div>

3
  • Eduardo bem vindo ao site, por favor leia nossas normas de como fazer uma pergunta, por favor poste o código invés de imagens 11/07/2019 às 19:22
  • Ja tentou usar um behavior subject inves de um eventEmiiter? 11/07/2019 às 19:39
  • Pior é que já tentei 11/07/2019 às 20:28

1 Resposta 1

0

Oi, consegui fazer aqui, a diferença foi que precisei criar um componente LoginComponent para usar o EventEmitter, pois o mesmo permite a comunicação entre componentes. Pelo que vi no seu código, você está usando ele para fazer a comunicação entre um componente e um service. Espero conseguir ajudá-lo.

app.component.html

<nav *ngIf="mostrarMenu" class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#" routerLink="/sistema/cliente" routerLinkActive="active">Cliente</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" routerLink="/sistema/produto" routerLinkActive="active">Produto</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" routerLink="/sistema/carro" routerLinkActive="active">Carro</a>
      </li>
    </ul>
  </div>
</nav>
<app-login-component (mostrarMenuEmitter)="receberMostraMenu($event)"></app-login-component>


<router-outlet></router-outlet>

login-component.html

<p>
  login-component works!
  <button (click)="login()">{{nomeBotao}}</button>

</p>

app.component.ts

export class AppComponent {

  public mostrarMenu = false;


  receberMostraMenu(mostraMenuLogin) {
    console.log('mostraMenuLogin', mostraMenuLogin);
    this.mostrarMenu = mostraMenuLogin;
  }
}

login-component.component.html

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponentComponent implements OnInit {

  @Output() mostrarMenuEmitter = new EventEmitter();

  private mail: string;
  private password: string;
  public nomeBotao: string = 'Logar';

  constructor(private loginService: LoginServiceService) {

  }

  ngOnInit() {}

  public login() {
    const mostrarMenu = this.loginService.login(this.mail, this.password);
    this.nomeBotao = mostrarMenu ? 'Deslogar' : 'Logar';
    this.mostrarMenuEmitter.emit(mostrarMenu);
  }



}

login-service.ts

@Injectable({
  providedIn: 'root'
})
export class LoginServiceService {

  logado = false;

  constructor() {}

  public login(mail: string, password: string): boolean {
    this.logado = !this.logado;
    return this.logado;
  }
}
1
  • Não entendi muito bem, coloquei um método chamado receberValor, mas acho que não está correto da maneira que fiz. 11/07/2019 às 20:29

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 .