Angular2 Tabellenzeilen als Komponente

Ich experimentiere mit angular2 2.0.0-beta.0

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

 .... content .... 

Jetzt funktioniert das und ich möchte den Inhalt in eine Komponente “Tabellenzeile” kapseln.

  

Und in der Komponente hat die Vorlage den Inhalt

.

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 so aussehen:

   ....

Wie kann ich das schaffen?

Verwenden Sie vorhandene Tabellenelemente als Selektor

Das Tabellenelement erlaubt keine

-Elemente als

Elemente und der Browser entfernt sie nur, wenn sie gefunden werden. Sie können es in eine Komponente einfügen und trotzdem das zulässige

-Tag verwenden. Verwenden Sie einfach "tr" als Selektor.

Verwenden von

sollte ebenfalls erlaubt sein, funktioniert aber noch nicht in allen Browsern. Angular2 fügt dem DOM eigentlich niemals ein -Element hinzu, sondern bearbeitet es nur intern, daher kann es auch in allen Browsern mit Angular2 verwendet werden.

Attributselektoren

Eine andere Möglichkeit ist die Verwendung von Attributselektoren

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

wie verwendet werden

  

Hier ist ein Beispiel, das eine Komponente mit einem Attributselektor verwendet:

 import {Component, Input} from '@angular/core'; @Component({ selector: '[myTr]', template: `{{item}}` }) export class MyTrComponent { @Input('myTr') row; } @Component({ selector: 'my-app', template: `{{title}} 
` }) 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 mehr beteiligt, aber Sie bekommen die Idee.

Alter (Beta.0) Plünderer .

Ich fand das Beispiel sehr nützlich, aber es funktionierte nicht im 2.2.3-Build, so dass es nach vielen Kopfzerreißarbeiten mit ein paar kleinen Änderungen wieder funktionierte.

 import {Component, Input} from '@angular/core' @Component({ selector: "[my-tr]", template: `{{item}}` }) export class MyTrComponent { @Input("line") row:any; } @Component({ selector: "my-app", template: `

{{title}}

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

Versuche dies

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