Angular2: Rendern einer Komponente ohne das Wrapping-Tag

Ich kämpfe darum, einen Weg zu finden, dies zu tun. In einer übergeordneten Komponente beschreibt die Vorlage ein tableund sein theadElement, delegiert das Rendern jedoch tbodyan eine andere Komponente wie folgt:

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

Jede myResult-Komponente rendert im trGrunde genommen ein eigenes Tag:

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

Der Grund, warum ich dies nicht direkt in die übergeordnete Komponente einfüge (ohne dass eine myResult-Komponente erforderlich ist), ist, dass die myResult-Komponente tatsächlich komplizierter ist als hier gezeigt. Daher möchte ich ihr Verhalten in eine separate Komponente und Datei einfügen.

Das resultierende DOM sieht schlecht aus. Ich glaube, das liegt daran, dass es ungültig ist, da tbodyes nur trElemente enthalten kann (siehe MDN) , aber mein generiertes (vereinfachtes) DOM ist:

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

Gibt es eine Möglichkeit, dasselbe zu rendern, aber ohne die Umhüllung? <my-result> zu rendern Tag, und während weiterhin eine Komponente verwenden, um allein für das Rendern einer Tabellenzeile verantwortlich zu sein?

Ich habe betrachtet ng-content, DynamicComponentLoaderdie ViewContainerRef, aber sie scheinen nicht , eine Lösung für diese zu schaffen , soweit ich sehen kann.

Sie können Attributselektoren verwenden

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

und dann benutze es gerne

<td myTd></td>

Sie benötigen "ViewContainerRef" und tun in meiner Ergebniskomponente Folgendes:

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

Verwenden Sie diese Anweisung für Ihr Element

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

Anwendungsbeispiel:

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

und im übergeordneten HTML rufen Sie das Kartenelement wie gewohnt auf, zum Beispiel:

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

Die Ausgabe wird sein:

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

Attributselektoren sind der beste Weg, um dieses Problem zu lösen.

Also in deinem Fall:

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

meine Ergebnisse 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() {
  }

}

my-results html

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

Mein Ergebnis 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() {
  }

}

Mein Ergebnis HTML

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

Siehe Stackblitz: https://stackblitz.com/edit/angular-xbbegx

Sie können versuchen, das neue CSS zu verwenden display: contents

Hier ist meine Symbolleiste 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;
}

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

und in Gebrauch:

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

Eine weitere Option ist heutzutage die ContribNgHostModuleaus dem Paket zur Verfügung gestellte@angular-contrib/common .

Nach dem Import des Moduls können Sie host: { ngNoHost: '' }es Ihrem @ComponentDekorateur hinzufügen und es wird kein Wrapping-Element gerendert.