Angular2: renderiza un componente sin su etiqueta de envoltura

Estoy luchando por encontrar una manera de hacer esto. En un componente principal, la plantilla describe a tabley su theadelemento, pero delega la representación tbodya 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 genera su propia tretiqueta, 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 tbodyque solo puede contener trelementos (ver 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 forma de que podamos obtener lo mismo renderizado, pero sin la <my-result>etiqueta de envoltura , y mientras todavía usamos un componente para ser el único responsable de renderizar una fila de la tabla?

He mirado ng-content, DynamicComponentLoaderel ViewContainerRef, pero no parecen proporcionar una solución a este por lo que yo puedo ver.

Puede utilizar selectores de atributos

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

y luego úsalo como

<td myTd></td>

Necesita "ViewContainerRef" y dentro del componente my-result haga 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);
  }

Utilice 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);
   }
}

Uso de ejemplo:

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

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

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

La salida será:

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

Los selectores de atributos son la mejor manera de resolver este problema.

Entonces, en tu caso:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody my-results>
  </tbody>
</table>

mis-resultados ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-results, [my-results]',
  templateUrl: './my-results.component.html',
  styleUrls: ['./my-results.component.css']
})
export class MyResultsComponent implements OnInit {

  entries: Array<any> = [
    { name: 'Entry One', time: '10:00'},
    { name: 'Entry Two', time: '10:05 '},
    { name: 'Entry Three', time: '10:10'},
  ];

  constructor() { }

  ngOnInit() {
  }

}

mis-resultados html

  <tr my-result [entry]="entry" *ngFor="let entry of entries"><tr>

mi-resultado ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[my-result]',
  templateUrl: './my-result.component.html',
  styleUrls: ['./my-result.component.css']
})
export class MyResultComponent implements OnInit {

  @Input() entry: any;

  constructor() { }

  ngOnInit() {
  }

}

html de mi resultado

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

Ver stackblitz de trabajo: https://stackblitz.com/edit/angular-xbbegx

puedes intentar usar el nuevo css display: contents

aquí está mi barra de herramientas scss:

:host {
  display: contents;
}

:host-context(.is-mobile) .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

h1.app-name {
  margin-left: 8px;
}

y el html:

<mat-toolbar color="primary" class="toolbar">
  <button mat-icon-button (click)="toggle.emit()">
    <mat-icon>menu</mat-icon>
  </button>
  <img src="/assets/icons/favicon.png">
  <h1 class="app-name">@robertking Dashboard</h1>
</mat-toolbar>

y en uso:

<navigation-toolbar (toggle)="snav.toggle()"></navigation-toolbar>

Otra opción hoy en día es la ContribNgHostModulepuesta a disposición del @angular-contrib/commonpaquete .

Después de importar el módulo, puede agregarlo host: { ngNoHost: '' }a su @Componentdecorador y no se procesará ningún elemento de envoltura.