1

Eu gostaria de passar um service como parâmetro entre 2 componentes, do pai para o filho. A comunicação entre os componentes está okay, estou recebendo o service, mas quanto tento utilizar as funções dentro do service dá como se não existissem. Lembrando que eu quero passar o service inteiro (para não precisar importar) e não somente o nome dele.

Exemplo

Parent.component.ts

Import { Service} from '../_service/service.service';
...

@ViewChild('child') child:ChildComponent;

constructor(private service:Service) {

}

ngOnInit() {
    //pelo componente pai estou enviando o service como parâmetro ao filho, tudo okay ele recebe l
    this.child.setService(Service);
}

Child.component.ts

...
private serviceElement;

ngOnInit() {
     useService();
}

setService(service:any) {
    console.log(service);
    //o retorno do console.log é: Service(http) { this.http = http ....
    //ou seja, o service chegou até aqui

    return this.serviceElement = service;
}

useService() {
 this.serviceElement.list();
 //retorna o erro abaixo
}

O erro retornado ao tentar utilizar o service é:

ERROR Error: Uncaught (in promise): TypeError: this.serviceElement.list is not a function

Qual seria a forma correta de passar um service de um componente pai para o filho como parâmetro?

1
  • Você não precisa fazer isso, basta injetar o mesmo serviço no outro componente e pronto, eles já vão compartilhar a mesma instância Commented 28/02/2019 às 15:45

3 Respostas 3

1

Encontrei uma forma de fazer isso, a única modificação para no código acima é ao em vez de passar o Service, tem que passar o service, a chamada do service do componente pai.

Antes

this.child.setService(Service);

Depois

this.child.setService(service);

Agora consigo acessar o service injetado no pai pelo componente filho.

1

Como você passou anteriormente o Serviço como importação, talvez seja necessário iniciar uma variável com um new desse serviço. No pai você não precisou iniciar como new pois ele está no construtor que já resolve essa ação sem que você precise escrever isso.

1

Compartilhando minha solução com vcs, implementei a sugestão dadas acima, porém o componenente que estava fazendo tem um child com ngIf vinha sempre undefined, e não posso injetar service fixo neles, porque usarei dados customizaveis... a solução BehaviorSubject

export class MidiasDistribuicaoComponent implements OnInit {
    contextoConfig: any;
    contextoBehaviorSubject = new BehaviorSubject<any>('contexto');

    constructor(private midiasDistribuicaoService: MidiasDistribuicaoService) {
        this.contextoConfig = {
            values: MidiasDistribuicaoValues,
            service: this.midiasDistribuicaoService
        };
    }

    ngOnInit() {
        this.contextoBehaviorSubject.next(this.contextoConfig);
    }

}

e depois por input-property no child, recebe o observable, e carrega no onInit

<app-gerenciador [contextoBehaviorSuject]='contextoBehaviorSubject'>

e no ts do child:

ngOnInit(): void {
    this.contextoBehaviorSuject.subscribe(contextoConfig => {
        this.contextoService = contextoConfig.service;
        this.values = contextoConfig.values;
    });

}

pronto ... posso compartilhar dados complexos entre componentes com um gerador de conteúdo(Behavior Subject) e os filhos dos filhos podem usar também é só rececer por inputProperty e se inscrever no onInit. mais informações sobre o observable em

https://dev.to/felipedsc/behaviorsubject-para-comunicacao-entre-componentes-3kpj

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 .