我正在实验angular2 2.0.0-beta.0
我有一张桌子，线内容是由angular2生成的：
<table>
<tr *ngFor="#line of data">
.... content ....
</tr>
</table>
现在这可行，我想将内容封装到组件“表格行”中。
<table>
<table-line *ngFor="#line of data" [data]="line">
</table-line>
</table>
并且在组件中，模板具有<tr> <td>内容。
但是现在该表不再起作用。这意味着内容不再显示在列中。在浏览器中，检查器向我显示DOM元素如下所示：
<table>
<table-line ...>
<tbody>
<tr> ....
我该如何工作？
Answers:
使用现有的表格元素作为选择器
table元素不允许将<table-line>元素作为子元素，浏览器只会在找到它们时将其删除。您可以将其包装在组件中，并仍然使用允许的<tr>标签。只是"tr"用作选择器。
使用 <template>
<template>也应允许，但并非在所有浏览器中都适用。Angular2实际上从不<template>向DOM 添加元素，而只是在内部对其进行处理，因此，它也可以在所有带有Angular2的浏览器中使用。
属性选择器
另一种方法是使用属性选择器
@Component({
selector: '[my-tr]',
...
})
像
<tr my-tr>tr标签，则将使用它，否则将发生默认的浏览器行为。您还可以将属性或类添加到组件选择器，例如<tr line-item>使用组件选择器"tr[line-item] "或<tr class="line-item">使用组件选择器tr.line-item。这样，您就可以完全控制。我还没有在Angular2中尝试过任何一种方法，但是我很确定这是可行的。
<li>类似的情况，我看不出为什么不使用它的任何原因。
我发现该示例非常有用，但是在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(); }
}
MyTrComponent即可app.module.ts正常工作。
这是一个使用带有属性选择器的组件的示例：
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）矮人。
Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'myTr' since it isn't a known property of 'tr'.
我为组件样式添加了“ 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/
contents工作原理，所以我不想基于错误的假设在此放置信息...我理解后添加了解释，但是如果有人注意到它有错误，请随时指出它^ ^。我还添加了一个链接，以便人们可以进行进一步的调查...我注意到一件事，尽管它说这在IE11上不起作用，但我在IE 11.657.18362.0上进行了尝试，并且效果很好（但是，由于我使用角形，某处可能会有一个polyfill，所以我不能保证在其他环境下100％
试试这个
@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{}