0

Eu tenho um component de Navbar que fica na raiz do projeto, e tenho do lado desse component um outro que é uma parte.Ex:

navbar
componenet1[
    component2
    component3
    component4[
        component5
        component6
    ]

]

Preciso passar um dado do component 6 pra navbar, mas apenas quando eu entro na rota desse component, alguem tem uma ideia de como fazer isso para me ajudar.

4
  • 1
    não compensa fazer um service pra isso? por que se for fazer Output até o nivel do navbar vai ficar mt feio Commented 8/06/2018 às 20:19
  • O foda é que eu preciso não refazer requisição, ai eu até tenho service pra isso. O problema é a verificação de rota nesse caso; Commented 9/06/2018 às 0:32
  • da uma pesquisada em SnapShot do angular. Commented 9/06/2018 às 1:51
  • Pode exprimentar sempre utilizar store para a sua aplicaçao isso vai te premitir aceder aos dados em difrentes partes da aplicação (ex:ngrx.io/guide/store)
    – diogoLima
    Commented 7/05/2019 às 10:54

1 Resposta 1

1

Tem duas formas principais de compartilhar um estado entre dois componentes que não tem relação de pai/filho. A primeira seria com behavior subject com um service injetado nos dois componentes outra forma seria por um gerenciador de estado como o ngrx que segue o padrão redux.

Exemplo com behavior subject:

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Data } from '../entities/data';

@Injectable()
export class DataService {

  private dataSource = new BehaviorSubject<SnapshotSelection>(new Data());
  data = this.dataSource.asObservable();

  constructor() { }

  updatedDataSelection(data: Data){
    this.dataSource.next(data);
  }

}

Seu Componente

constructor(private dataService: DataService) { }

dataService.data.subscribe(data => {
// use os dados aqui
})

dataService.updateData(newData);// para atualizar os dados

Fonte: https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

6
  • Porque usou o decorator @Injectable()? Pelo que sei ele é usado quando se injeta um serviço dentro do outro! Essa linha é uma injeção? private dataSource = new BehaviorSubject<SnapshotSelection>(new Data());
    – Marconi
    Commented 11/06/2018 às 11:38
  • O @Injectable() significa que o angular vai lidar com o dependency injection pra vc, então vc pode iniciar esse service em qualquer construtor seja de um componente ou outro serviço que o angular injeta ele pra vc. Nesse caso vc injeta o serviço nos dois componentes que vc quer comunicar. Commented 11/06/2018 às 11:46
  • Mas nesse caso, eu preciso que o dado vá para a navbar apenas quando eu entrar na rota la do component 6, o problema está ai, não tenho um evento que verifica se a rota mudou, isso que está mais me atrapalhando Commented 11/06/2018 às 13:36
  • vc pode usar o dataService.updateData(newData); no init do component 6 e usar um if no navbar pra saber se veio o dado ainda ou não. Commented 11/06/2018 às 13:39
  • Por acaso essa informação veio deste artigo: medium.com/@weswhite/… ? Commented 19/07/2018 às 14:28

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 .