Angular2 表行作为组件

Question

我正在试验 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>

并且在组件中，模板具有 内容。

但是现在表格不再起作用了。这意味着，内容不再显示在列中。在浏览器中，检查器向我显示 DOM 元素如下所示:

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

我怎样才能让它工作？

Answer 1

使用现有表格元素作为选择器

表格元素不允许 <table-line>元素作为子元素，浏览器在找到它们时会删除它们。您可以将它包装在一个组件中并仍然使用允许的 <tr>标签。只需使用 "tr"作为选择器。

使用 <template>

<template>也应该被允许，但还不能在所有浏览器中工作。 Angular2 实际上从不添加 <template>元素添加到 DOM，但只在内部处理它们，因此这也可以在所有带有 Angular2 的浏览器中使用。

属性选择器

另一种方法是使用属性选择器

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

像这样使用

<tr my-tr>