Angular2-Tabellenzeilen als Komponente

Ich experimentiere mit angle2 2.0.0-beta.0

Ich habe eine Tabelle und der Zeileninhalt wird von angle2 folgendermaßen generiert:

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

Jetzt funktioniert dies und ich möchte den Inhalt in eine Komponente "Tabellenzeile" einkapseln.

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

In der Komponente enthält die Vorlage den Inhalt <tr> <td>.

Aber jetzt funktioniert der Tisch nicht mehr. Das heißt, der Inhalt wird nicht mehr in Spalten angezeigt. Im Browser zeigt mir der Inspektor, dass die DOM-Elemente folgendermaßen aussehen:

    <table>
        <table-line ...>
            <tbody>
                <tr> ....

Wie kann ich das zum Laufen bringen?

Verwenden Sie vorhandene Tabellenelemente als Selektor

Das Tabellenelement erlaubt keine <table-line>Elemente als untergeordnete Elemente und der Browser entfernt sie nur, wenn er sie findet. Sie können es in eine Komponente einbinden und trotzdem das zulässige <tr>Tag verwenden. Einfach "tr"als Selektor verwenden.

mit <template>

<template>sollte ebenfalls erlaubt sein, funktioniert aber noch nicht in allen Browsern. Angular2 fügt <template>dem DOM eigentlich nie ein Element hinzu , sondern verarbeitet es nur intern. Daher kann dies auch in allen Browsern mit Angular2 verwendet werden.

Attributselektoren

Eine andere Möglichkeit ist die Verwendung von Attributselektoren

@Component({
  selector: '[my-tr]',
  ...
})

verwendet werden wie

<tr my-tr>

Ich fand das Beispiel sehr nützlich, aber es funktionierte im 2.2.3-Build nicht. Nach langem Kopfkratzen funktionierte es mit ein paar kleinen Änderungen wieder.

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

@Component({
  selector: "[my-tr]",
  template: `<td *ngFor='let item of row'>{{item}}</td>`    
})
export class MyTrComponent {
  @Input("line") row:any;
}

@Component({
  selector: "my-app",
  template: `<h1>{{title}}</h1>
  <table>
    <tr  *ngFor="let line of data" my-tr [line]="line"></tr>
  </table>`

})
export class AppComponent {

  title = "Angular 2 - tr attribute selector!";
  data = [ [1,2,3], [11, 12, 13] ];
  constructor() { console.clear(); }
}

Hier ist ein Beispiel für die Verwendung einer Komponente mit einem Attributselektor:

import {Component, Input} from '@angular/core';
@Component({
  selector: '[myTr]',
  template: `<td *ngFor="let item of row">{{item}}</td>`
})
export class MyTrComponent {
  @Input('myTr') row;
}
@Component({
  selector: 'my-app',
  template: `{{title}}
  <table>
    <tr *ngFor="let line of data" [myTr]="line"></tr>
  </table>
  `
})
export class AppComponent {
  title = "Angular 2 - tr attribute selector";
  data = [ [1,2,3], [11, 12, 13] ];
}

Ausgabe:

1   2   3
11  12  13

Natürlich wäre die Vorlage in der MyTrComponent komplizierter, aber Sie haben die Idee.

Alter (Beta.0) Plunker .

Das Hinzufügen von 'display: content' zum Komponentenstil hat für mich funktioniert.

CSS:

.table-line {
    display: contents;
}

HTML:

<table>
    <table-line class="table-line" [data]="line">
    </table-line>
</table>

Warum funktioniert das?

Wenn Sie eine Komponente instanziieren, wird der Inhalt der Komponente wie im Winkel (nach dem Kompilieren) wie folgt in das DOM eingeschlossen:

<table>
    <table-line>
        <tr></tr>
    </table-line>
</table>

Damit die Tabelle jedoch ordnungsgemäß angezeigt wird, können die trTags von nichts umbrochen werden.

Also fügen wir display: contentsdiesem neuen Element hinzu. Soweit ich weiß, bedeutet dies, dem Explorer mitzuteilen, dass dieses Tag nicht gerendert werden soll, und den inneren Inhalt so anzuzeigen, als ob kein Umbruch stattgefunden hätte. Während das Tag noch vorhanden ist, wirkt es sich nicht visuell auf die Tabelle aus, und die trTags werden so behandelt, als wären sie direkte untergeordnete Elemente destable Elemente Tags.

Wenn Sie weitere Informationen zur Funktionsweise von Inhalten benötigen: https://bitsofco.de/how-display-contents-works/

Versuche dies

@Component({
    selecctor: 'parent-selector',
    template: '<table><body><tra></tra></body></table>'
    styles: 'tra{ display:table-row; box-sizing:inherit; }'
})
export class ParentComponent{
}

@Component({
    selecctor: 'parent-selector',
    template: '<td>Name</td>Date<td></td><td>Stackoverflow</td>'
})
export class ChildComponent{}