Angular2: rendre un composant sans sa balise d'habillage

J'ai du mal à trouver un moyen de le faire. Dans un composant parent, le modèle décrit a tableet son theadélément, mais délègue le rendu du tbodyà un autre composant, comme ceci:

<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>

Chaque composant myResult rend sa propre trbalise, essentiellement comme ceci:

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

La raison pour laquelle je ne mets pas cela directement dans le composant parent (en évitant le besoin d'un composant myResult) est que le composant myResult est en fait plus compliqué que celui indiqué ici, donc je veux mettre son comportement dans un composant et un fichier séparés.

Le DOM résultant semble mauvais. Je pense que c'est parce qu'il est invalide, car tbodyil ne peut contenir que des tréléments (voir MDN) , mais mon DOM généré (simplifié) est:

<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>

Existe-t-il un moyen d'obtenir le même rendu, mais sans la <my-result>balise d' emballage , et tout en utilisant un composant pour être seul responsable du rendu d'une ligne de table?

Je l' ai regardé ng-content, DynamicComponentLoaderla ViewContainerRef, mais ils ne semblent pas fournir une solution à ce pour autant que je peux voir.

Vous pouvez utiliser des sélecteurs d'attributs

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

puis utilisez-le comme

<td myTd></td>

Vous avez besoin de "ViewContainerRef" et à l'intérieur du composant my-result, faites quelque chose comme ceci:

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

Utilisez cette directive sur votre élément

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

Exemple d'utilisation:

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

et dans le html parent, vous appelez l'élément card comme d'habitude, par exemple:

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

La sortie sera:

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

Les sélecteurs d'attributs sont le meilleur moyen de résoudre ce problème.

Donc dans votre cas:

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

mes-résultats 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() {
  }

}

mes-résultats html

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

mon-résultat 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() {
  }

}

my-result html

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

Voir stackblitz de travail: https://stackblitz.com/edit/angular-xbbegx

vous pouvez essayer d'utiliser le nouveau css display: contents

voici ma barre d'outils 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;
}

et le 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>

et en cours d'utilisation:

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

Une autre option de nos jours est la ContribNgHostModulemise à disposition à partir du @angular-contrib/commonpackage .

Après avoir importé le module, vous pouvez l'ajouter host: { ngNoHost: '' }à votre @Componentdécorateur et aucun élément d'emballage ne sera rendu.