How To Catch The Variable Of Another Component

0

I have the following situation.

utils-nav-user.component.html

<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand text-white">ESC - Sistema De Controle De Pizzaria - </a>
  <a class="navbar-brand text-white">Usuário Logado: {{loginUsuarioParam}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropup">
        <a class="nav-link dropdown-toggle text-white" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
        <div class="dropdown-menu" aria-labelledby="dropdown10">
          <a class="dropdown-item" routerLink="/usuario/login" routerLinkActive="active">Sair</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

utils-nav-user.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
  selector: 'app-utils-nav-usuario',
  templateUrl: './utils-nav-usuario.component.html',
  styleUrls: ['./utils-nav-usuario.component.css']
})
export class UtilsNavUsuarioComponent {

  loginUsuarioParam : string;

}

I have this variable in my Component and I need to read this variable in several parts of the program, more like I read in another Component for example in the example below.

request-avulso-create.component.ts

  abrirCaixa() {

    this.caixa.codigoUsuario = this.loginUsuarioParam;

    this.caixaService.saveCaixa(this.caixa)
    .subscribe (
      data => {
        if (data.status == 200) {
          this.toastr.success("Pedido Avulso", "Pedido Avulso Alterado Com Sucesso.");

        }
      },
      error => {
        if (error.status == 0) {
          this.toastr.error("Pedido Avulso", "Sem Conexão Com O WebService.");
        } else {
          this.error = error.json();
          this.toastr.error("Pedido Avulso", this.error.message); 
        }
      }
    );
  }

I have this method above that is in another Component I want to read to play in this class someone has idea how I do it, I had the idea to change this nav as it is used on all the screens create a Module for it but not now I know how to use the variable that is there.

    
asked by anonymous 15.02.2018 / 03:00

1 answer

1

There are two possibilities:

The first is if the component you want to read the variable for is the child of the component that has the loginUsuarioParam variable (UtilsNavUsuarioComponent). In this case you declare the variable LoginUsuarioParam as @Input () in the child component:

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
@Component({
  selector: 'app-pedido-avulso-create',
  templateUrl: './pedido-avulso-create.component.html',
  styleUrls: ['./pedido-avulso-create.component.css']
})
export class UtilsPedidoAvulsoCreateComponent {
  /* você pode declarar um valor padrão caso a variável não seja declarada no componente */
  Input() loginUsuarioParam = '';

}

And the other option is to save to a global variable or to the localStorage.

    
15.02.2018 / 11:21