javascript - ejemplos - Angular2: renderiza un componente sin su etiqueta de ajuste

angularjs tutorial

Question

Estoy luchando por encontrar una manera de hacer esto. En un componente padre, la plantilla describe una table y su elemento thead , pero delega la representación del tbody a otro componente, como este:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

Cada componente myResult presenta su propia etiqueta tr , básicamente así:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

La razón por la que no pongo esto directamente en el componente principal (evitando la necesidad de un componente myResult) es que el componente myResult es en realidad más complicado de lo que se muestra aquí, por lo que quiero poner su comportamiento en un componente y archivo separados.

El DOM resultante se ve mal. Creo que esto se debe a que no es válido, ya que tbody solo puede contener elementos tr (consulte MDN) , pero mi DOM generado (simplificado) es:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

¿Hay alguna manera de que podamos obtener lo mismo, pero sin la etiqueta envolvente <my-result> , y al mismo tiempo usar un componente para ser el único responsable de representar una fila de la tabla?

He mirado ng-content , DynamicComponentLoader , ViewContainerRef , pero no parecen proporcionar una solución a esto hasta donde puedo ver.

Answer 1

Necesita "ViewContainerRef" y dentro del componente my-result hacer algo como esto:

html:

<ng-template #template>
    <tr>
       <td>Lisa</td>
       <td>333</td>
    </tr>
 </ng-template>

ts:

@ViewChild(''template'') template;


  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    this.viewContainerRef.createEmbeddedView(this.template);
  }

Answer 2

Puedes usar selectores de atributos

@Component({
  selector: ''[myTd]''
  ...
})

y luego úsalo como

<td myTd></td>

Answer 3

Use esta directiva en su elemento

@Directive({
   selector: ''[remove-wrapper]''
})
export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
       const parentElement = el.nativeElement.parentElement;
       const element = el.nativeElement;
       parentElement.removeChild(element);
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
   }
}

Ejemplo de uso:

<div class="card" remove-wrapper>
   This is my card component
</div>

y en el html padre, llama al elemento de tarjeta como de costumbre, por ejemplo:

<div class="cards-container">
   <card></card>
</div>

El resultado será:

<div class="cards-container">
   <div class="card" remove-wrapper>
      This is my card component
   </div>
</div>