1
resposta

Output property em componente filho carregado dinamicamente.

Na demonstração do mestre Flávio, o componente pai photo-list-component teve acesso ao valor digitado no input do componente filho ap-search através do evento customizado onTyping do mesmo, definido como uma Output property. Mas, nesse caso, ap-search é acesso de forma estática no template de photo-list-component.

<ap-search (onTyping)="filter = $event">

Mas, e quanto o componente filho é acessado de maneira dinâmica, dentro de um router-outlet, no template do componente pai. É possível fazer essa passagem de valor??

Obrigado.

1 resposta

Olá André, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Quando temos um componente filho dentro de um router-outlet, ele pode se comunicar com o componente pai de duas maneiras principais: através de serviços compartilhados ou por meio de eventos customizados, onde:

  • Serviços compartilhados: Um serviço é uma classe que pode ser injetada em vários componentes, permitindo o compartilhamento de dados entre eles. Para usar um serviço, você precisa criar uma classe de serviço e fornecê-la no módulo ou no provedor raiz da sua aplicação. O componente filho pode definir um valor no serviço e o componente pai pode ler esse valor sempre que necessário.

  • Eventos customizados: Os eventos customizados permitem que o componente filho emita um evento e notifique o componente pai sobre uma ação ou uma mudança. O componente filho pode emitir um evento com o valor desejado e o componente pai pode ouvir esse evento e reagir a ele.

Ambas as abordagens são válidas e a escolha depende do contexto e das necessidades da sua aplicação.

No caso de serviços compartilhados, é possível criar um serviço com um método para definir o valor e outro método para obter o valor. O componente filho injeta esse serviço e usa o método para definir o valor. O componente pai também injeta o serviço e usa o método para obter o valor definido pelo componente filho.

Para os eventos customizados, o componente filho pode declarar um evento usando a diretiva @Output(). O componente filho emite o evento com o valor desejado usando o método emit() quando ocorrer uma ação específica. O componente pai escuta esse evento usando a sintaxe de vinculação de eventos e pode executar uma função para lidar com o valor emitido pelo componente filho.

Essas são as abordagens básicas para permitir a comunicação entre um componente filho e um componente pai quando o componente filho é acessado de maneira dinâmica dentro de um router-outlet. Lembre-se de que é importante entender o contexto e as necessidades específicas da sua aplicação ao escolher a abordagem adequada.

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software