Angular2 строки таблицы как компонент

Question 1

Экспериментирую с angular2 2.0.0-beta.0

У меня есть таблица, и содержимое строки создается angular2 следующим образом:

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

Теперь это работает, и я хочу инкапсулировать контент в компонент «table-line».

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

А в компоненте шаблон имеет содержимое <tr> <td>.

Но теперь таблица больше не работает. Это означает, что содержимое больше не отображается в столбцах. В браузере инспектор показывает мне, что элементы DOM выглядят так:

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

Как я могу заставить это работать?

Question 2

использовать существующие элементы таблицы как селектор

Элемент таблицы не позволяет использовать <table-line>элементы как дочерние элементы, и браузер просто удаляет их, когда находит их. Вы можете обернуть его в компонент и по-прежнему использовать разрешенный <tr>тег. Просто используйте "tr"как селектор.

с помощью <template>

<template>также должно быть разрешено, но пока работает не во всех браузерах. Angular2 на самом деле никогда не добавляет <template>элементы в DOM, а только обрабатывает их внутренне, поэтому это также можно использовать во всех браузерах с Angular2.

Селекторы атрибутов

Другой способ - использовать селекторы атрибутов

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

использоваться как

<tr my-tr>

Question 3

Я нашел этот пример очень полезным, но он не работал в сборке 2.2.3, поэтому после долгой царапины в голове он снова заработал с небольшими изменениями.

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

Question 4

Вот пример использования компонента с селектором атрибутов:

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

Вывод:

1   2   3
11  12  13

Конечно, шаблон в MyTrComponent будет более сложным, но вы поняли идею.

Старый (beta.0) плункер .

Question 5

Добавление display: contents в стиль компонента сработало для меня.

CSS:

.table-line {
    display: contents;
}

HTML:

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

Почему это работает?

При создании экземпляра компонента angular (после компиляции) обертывает содержимое компонента в DOM следующим образом:

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

Но для правильного отображения таблицы trтеги нельзя ничем обернуть.

Итак, мы добавляем display: contentsк этому новому элементу. Насколько я понимаю, это означает, что проводник сообщает, что этот тег не должен отображаться, и отображает внутреннее содержимое, как если бы не было обертывания. Таким образом, хотя тег все еще существует, он не влияет на визуально таблицу, а trтеги обрабатываются так, как если бы они были прямыми дочерними элементами tableтега.

Если вы хотите подробнее узнать, как работает контент: https://bitsofco.de/how-display-contents-works/

Question 6

попробуй это

@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{}