Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Recuperando dados de um Component Interno para um Component Externo.

Olá pessoal, estou com algumas dúvidas.

Problema: Eu tenho um determinado modelo de formulário e dentro dele, estou utilizando outro Component que possui inputs. Preciso recuperar os valores do componente interno para fazer um cadastro (via componente externo)

Componente externo (exemplo simples):

<form>
        <component-interno [inputOne]="animal.pata" [inputTwo]="animal.raça">
        <button>....</button>
</form>

Componente interno (HTML) (exemplo simples):

<div class="form-group"

    <input type="text"   [(ngModel)]="inputOne" name="inputOne">
    <input type="text"   [(ngModel)]="inputTwo" name="inputTwo">

</div>

Componente interno (TS) (exemplo simples):

@Component({
       ....
      selector: 'component-interno',
})

export class ComponentInterno {
    @Input() inputOne: string;
    @Input() inputTwo: string;
}

Alguma dica para enviar os dados dos inputs internos para o component externo para fazer o cadastro?

Obrigado!

4 respostas

Bom dia.

Você precisa trabalhar com @Output. Evento disparado no filho que capturado no pai.

Da uma olhada na aula do componente botao. É o mesmo caminho.

Pensei nisso também Flavio, porém, passando os valores, correto? Valeu!

solução!

Isso! Vale uma observação aqui minha. Veja que a comunicação entre componentes pai e filho é tranquila, você passa através de property e a comunicação entre filho e pai você passa através de evento.

E comunicação entre irmãos? É um saco isso... é por isso que o React implementou a comunicação dos componentes através de stores, centralizando todo o acesso ao estado dos componentesm em um único lugar.

Você escreve horrores, é muito verboso mas para uma aplicação grande com zilhões se componentes pode ajudar.

Eu não uso central state management com Angular, mas há um movimento para aplicações em Angular seguirem o mesmo pattern do React. Só fique atento com isso no futuro. Vai que cola :)

Entendi, valeu pelas dicas!

Consegui resolver o meu problema seguindo a ideia da aula. No entanto, vale ressaltar uma coisa que me deu um pouco de dor de cabeça e que talvez outros alunos tenham o mesmo problema, hehe.

Na verdade foi um erro muito simples e falta de atenção minha mesmo. Ao invés de importar o EventEmitter do @angular/core o importei o events e o resultado disso? um deadlock no meu navegador quando eu executava a função que era invocada no pai.

Valeu!