Me gustaría saber si es posible definir un componente principal sin especificar qué componente secundario usar.
Normalmente, crearía un componente principal y usaría el selector del componente secundario en el archivo html
componente-padre-1.html:
//some logic <child-component-1-selector></child-component-1-selector> //some logicSi sigo este enfoque, tengo que definir qué tipo de componente secundario quiero usar. Pero si quiero usar el componente principal varias veces con diferentes componentes secundarios, tengo que copiar la parte lógica y crear componentes principales separados:
componente-padre-1.html:
//some logic <child-component-1-selector></child-component-1-selector> //some logiccomponente-padre-2.html:
//some logic (same as above) <child-component-2-selector></child-component-2-selector> //some logic (same as above)No me gusta el enfoque porque generaría duplicados de código. ¿Hay alguna manera de definir el componente principal sin especificar qué componente secundario representar y simplemente 'pasar' el componente secundario como argumento?
enfoque actual, grand-parent-component.html:
<parent-component-1></parent-component-1> <parent-component-2></parent-component-2>enfoque sugerido, grand-parent-component.html:
<parent-component-selector [childcomponent] = "child-component-1"></parent-component-selector> <parent-component-selector [childcomponent] = "child-component-2"></parent-component-selector>Espero haberme dejado claro acerca de mi 'problema'. Tal vez ustedes puedan ayudarme y darme sugerencias sobre las mejores prácticas.
Parece que quieres poder hacer algo como:
<my-custom-panel> <here-is-one-inner-component> </my-custom-panel>Y luego en otro lugar,
<my-custom-panel> <some-other-component> </my-custom-panel>Si te estoy leyendo bien, entonces básicamente estás buscando usar la proyección de contenido de Angular.
Entonces, en mi ejemplo anterior, escribiría el componente my-custom-panel para que se vea así:
@Component({ selector: 'my-custom-panel', template: ` <div class="wrapper"> <h1>My Heading</h1> <ng-content></ng-content> </div> ` }) export class .... El truco es esa etiqueta <ng-content> , que actúa como un marcador en la plantilla del componente. Al usar my-custom-panel en otra plantilla, cualquier contenido que aparezca dentro de la etiqueta my-custom-panel se proyectará justo al lado de esa etiqueta <ng-content> .
Con suerte, un ejemplo aclarará las cosas. Entonces, en el caso de mi primer ejemplo, donde la plantilla que usa my-custom-panel es:
<my-custom-panel> <here-is-one-inner-component> </my-custom-panel>Eso se transformará en:
<div class="wrapper"> <h1>My Heading</h1> <ng-content></ng-content> <here-is-one-inner-component> </div>¿Es eso lo que estás buscando?