1

Gostaria de saber como posso através de um componente afetar outro componente no angular 6. Esses componentes não são pai e filho. São distintos.

<app-navegacao></app-navegacao>
<router-outlet></router-outlet>

Onde está Open/Closed Quotes é a minha barra de navegação: ""

E onde tem a tabela fica meu outro componente que faz parte de um router-outlet:

Imagem 1

quero executar o evento associado ao botão verde e emitir os valores para a minha barra de navegação

4
  • Já tentou utilizar um Serviço que possui um BehaviorSubject ? No componente da table você insere conteúdo no Subject, e no componente de navegação você da um subscribe no mesmo... já tentou? Commented 2/10/2018 às 18:38
  • Não sabia dessa possibilidade. Como funciona isso? Commented 2/10/2018 às 18:39
  • Vou formular uma resposta para te exemplificar. Commented 2/10/2018 às 18:41
  • Minha opinião: A barra ficaria no componente pai e o componente debaixo entraria através da navegação através do <router-outlet></router-outlet>. Assim basta você usar EventEmitter pra notificar o componente pai sempre que algo acontecer no componente filho.
    – Marconi
    Commented 3/10/2018 às 17:22

2 Respostas 2

1

Você pode utilizar uma @Service com um BehaviorSubject. O BehaviorSubject contém o valor que precisa ser compartilhado com outros componentes, ele ao menos tempo é Observador e Observável o mesmo pode receber e emitir os valores atuais.

Você irá precisar uma Service com um atributo do tipo BehaviorSubject, no meu exemplo criei o mesmo com o tipo numero e um valor padrão 0, como abaixo:

@Injectable()
export class QuoteService {
  public openQuotes = new BehaviorSubject<number>(0);

setOpenQuote(quotes : number){
   this.openQuotes.next(quotes);
}
}

No componente da Table será o lugar onde irá pegar os dados, e enviá-los para o BehaviorSubject, então você precisa injetar a Service no componente da Table, e no método chamado pelo botão verde, você irá enviar os dados:

construtor(
   quoteService : QuoteService 
){}

acaoBotaoVerde(){
   this.quoteService.setOpenQuote(quotesOpened);
}

E no componente de navegação você simplesmente irá fazer um subscribe para ficar monitorando caso as informações mudem:

construtor(
   quoteService : QuoteService 
){}

this.quotesOpen = this.quoteService.openQuotes.subscribe(
   (quotes) => {
     return quotes;
   }
);

Claro, esse código pode ser otimizado, mas ajuda você ter uma ideia do que utilizar.

2
  • Valeu mano. Vou testá-lo aqui. Se não for abusar da sua boa vontade.. gostaria de saber se você possui um material onde eu posso estudar rxjs e como saber se uma requisição foi feita e se deu certo ou não esta requisição. Começando agora a desenvolver em front e back e isso está me atrapalhando. Commented 2/10/2018 às 19:37
  • Amigo confesso que o conteúdo em PT-Br é bem escasso, mas para rxjs mais especificamente os Observables, recomendo esse artigo aqui, nele você vai ver sobre os métodos de retorno, then, error e etc... tableless.com.br/entendendo-rxjs-observable-com-angular Commented 2/10/2018 às 20:54
-2

Abaixo vou passar um exemplo bem simples de como disparar e ouvir eventos de diferentes contextos, será descrito o que fazer em cada contexto.

CONTEXTO - Serviço do componente do botão verde:

import { EventEmitter } from '@angular/core'; //import necessario

public eventoEmit = new EventEmitter<boolean>(); // seu emissor de evento

public Click_BotaoVerde()
{
    //demais ações 
    this.eventoEmit.emit(true); // emitindo o evento
}

CONTEXTO - Component menu

constructor(private _btnVerdeService: BtnVerdeService){

  this._btnVerdeService.eventoEmit.subscribe(x => {
      // Aqui você já esta ouvindo os eventos do btn verde
    });
}

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 .