pasar - Filas de tabla Angular2 como componente
pasar parametros entre componentes angular 4 (4)
Estoy experimentando con angular2 2.0.0-beta.0
Tengo una tabla y angular2 genera el contenido de la línea de esta manera:
<table>
<tr *ngFor="#line of data">
.... content ....
</tr>
</table>
Ahora esto funciona y quiero encapsular el contenido en un componente "línea de tabla".
<table>
<table-line *ngFor="#line of data" [data]="line">
</table-line>
</table>
Y en el componente, la plantilla tiene el contenido <tr> <td>.
Pero ahora la mesa ya no funciona. Lo que significa que el contenido ya no se muestra en columnas. En el navegador, el inspector me muestra que los elementos DOM se ven así:
<table>
<table-line ...>
<tbody>
<tr> ....
¿Cómo puedo hacer que esto funcione?
Aquí hay un ejemplo usando un componente con un selector de atributos:
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] ];
}
Salida:
1 2 3
11 12 13
Por supuesto, la plantilla en MyTrComponent estaría más involucrada, pero se entiende la idea.
Plunker viejo (beta.0).
Encontré el ejemplo muy útil, pero no funcionó en la compilación 2,2.3, por lo que después de rascarse la cabeza lo hizo funcionar nuevamente con algunos pequeños cambios.
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(); }
}
prueba esto
@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></td>''
})
export class ChildComponent{}
usar elementos de tabla existentes como selector
El elemento de tabla no permite elementos
<table-line>
como elementos secundarios y el navegador simplemente los elimina cuando los encuentra.
Puede envolverlo en un componente y seguir utilizando la etiqueta permitida
<tr>
.
Solo usa
"tr"
como selector.
usando
<template>
<template>
debería permitirse, pero aún no funciona en todos los navegadores.
Angular2 en realidad nunca agrega un elemento
<template>
al DOM, sino que solo los procesa internamente, por lo tanto, esto también se puede usar en todos los navegadores con Angular2.
Selectores de atributos
Otra forma es usar selectores de atributos
@Component({
selector: ''[my-tr]'',
...
})
para ser utilizado como
<tr my-tr>