Angular2 linhas da tabela como componente

Eu estou experimentando com angular2 2.0.0-beta.0

Eu tenho uma tabela e o conteúdo da linha é gerado pelo angular2 desta maneira:

 .... content .... 

Agora isso funciona e eu quero encapsular o conteúdo em um componente “table-line”.

  

E no componente, o modelo tem o conteúdo

.

Mas agora a mesa não funciona mais. O que significa que o conteúdo não é mais exibido em colunas. No navegador, o inspetor me mostra que os elementos DOM são assim:

   ....

Como posso fazer isso funcionar?

usar elementos de tabela existentes como seletor

O elemento table não permite elementos

como filhos e o navegador apenas os remove quando os encontra. Você pode envolvê-lo em um componente e ainda usar a tag

permitida. Apenas use "tr" como seletor.

usando

deve ser permitido, mas ainda não funciona em todos os navegadores. Na verdade, o Angular2 nunca adiciona um elemento ao DOM, mas apenas os processa internamente, portanto, isso também pode ser usado em todos os navegadores com o Angular2.

Seletores de atributo

Outra maneira é usar seletores de atributos

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

para ser usado como

  

Aqui está um exemplo usando um componente com um seletor de atributos:

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

Saída:

 1 2 3 11 12 13 

É claro que o modelo no MyTrComponent estaria mais envolvido, mas você entendeu.

Antigo (beta.0) plunker .

Eu achei o exemplo muito útil, mas não funcionou na versão 2.2.3, então depois de muito arranhão, ele funcionou novamente com algumas pequenas mudanças.

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

tente isso

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