Tem como carregar um componente filho em dois componentes pai destintos, sendo que em um desses componenetes pai, o componente filho seja carregado com mudanças no estilo?
Exemplo:
<CompontA>
<CompontC><CompontC>
<CompontA>
<CompontB>
<CompontC><CompontC>
<CompontB>
Vamos dizer que o <CompotC>é um tabela. Tem como eu alterar o estilo da <tr> dessa tabela somente dentro do<CompontB>?
hoje, com a Alura e o Google Gemini
Olá Luan, tudo beleza?
Então, tem sim
Primeiro a parte de usar seu componente em lugares diferentes, considerando que estão em locais diferentes: você precisa ter ele no exports do seu módulo, ex: declarations: [ ComponentC ], exports: [ ComponentC ]
Dentro do módulo dos componentes A e B você precisa importar o módulo do ComponentC, assim você consegue chamar o seu componentC no HTML do componentA e componentB, ex:
`
Se os três componentes fazem parte do mesmo módulo, você só precisa usar o seletor
Pra segunda parte, a estilização: você pode utilizar o @Input() pra passar valores para as propriedades do seu componente, ex:
Dentro do componentC.ts: @Input() qualEstilo: string = '',
Dentro do componenteC.html: <tr class='{{qualEstilo}}'> <td>Sou uma tabela</td></tr>,
Dentro do componenteC.scss: .estiloComponentA { background: red; } .estiloComponentB { background: yellow };
Qunado você for chamar o seu componentC em outro componente, você pode usar no seletor dele, o property bind. Ficaria assim (mais o menos) ex componentA.html: `
Dessa forma, você garante que quando o seu componentC for chamado dentro do componentA, o estilo aplicado a ele sera o background: red. Isso funciona também pro componentB (realizando as mesmas configurações)