Estoy tratando de crear un componente que tome algunos divs y los coloque en un orden específico según las clases definidas en el contenido para proyectar. Para esto, he creado un componente con algunos elementos ng-content con selectores de clase. Funciona si paso algo de HTML estático, sin embargo, si paso un componente, no muestra nada (excepto si uso una sola ranura). Creé un ejemplo en StackBlitz que se puede encontrar aquí .
He definido tres escenarios diferentes usando el mismo componente:
<app-content-formatter> <div class="body">This is just a nonsense text</div> <div class="head">This is the head.... I guess</div> </app-content-formatter> <app-content-formatter> <app-some-text></app-some-text> </app-content-formatter> <app-content-formatter [multiSlot]="false"> <app-some-text></app-some-text> </app-content-formatter>No estoy seguro de por qué sucede esto, y existe una gran posibilidad de que haya olvidado algo (comencé a trabajar con angular hace unos meses). El ejemplo provisto en StackBlitz es una abstracción de un escenario más complejo que requiere reemplazar un componente que se usa en una aplicación grande, la idea es evitar muchos cambios al reutilizar las clases y la estructura existentes, esa es la razón por la que me gustaría utilizar la proyección de contenido.
Si tengo que adivinar, diría que el problema son los selectores, pueden cambiar ya que están dentro de una etiqueta con el nombre del componente en sí, lo que también podría ser un problema, ya que necesitamos mostrar diferentes controles que se cargará dinámicamente (esa parte no se incluyó en el ejemplo ya que el problema es la proyección del contenido).
Gracias a todos de antemano por toda su ayuda!