Angular 我可以要一个不'；不呈现伪元素？

我正在尝试创建一组组件，使我能够呈现一个表，其中“用户”只需要提供：

• 数据（二维阵列）
• 每列的单元格模板

因此，理想情况下，您可以使用这些组件呈现3列表，如下所示：

<app-table [data]='sampleData'>
  <td>{{cell.toString().toUpperCase()}}</td>
  <td class="myClass">{{cell}}</td>
  <app-cell [cell]="cell"></app-cell>
</app-table>

这有点难看，因为将数据向下传递到模板中需要所有额外的标记，但这不是最大的问题

您会注意到最后一个“列”使用了

app cell

组件，但该组件仍然包装在

td

标记中：

<ng-template let-cell="cell">
  <td>
    <app-cell [data]="cell"></app-cell>
  </td>
</ng-template>

显然要做的事情是将

td

标记移动到

app cell

组件中，但是如果是I，则呈现的HTML如下所示：

<app-cell class="foo">
  <td>
    <div>...</div>
  </td>
</app-cell>

...

[好的，因此类仍然应用在错误的位置，但是很容易看到如何将其向下移动到

td

标记。]

然而，位于

tr

和

td

元素之间的额外伪元素让我担心——我使用的浏览器似乎不介意，但我怀疑我的大部分CSS都会被它抛出，因为有选择器期望

td

是

tr

的直接子元素

---

有没有办法去掉额外的伪元素？通常我可能会考虑使用指令，但我不知道如何在这里做到这一点，因为

app cell

组件需要一个模板，而指令没有这些…

来回答我自己的问题-因为我在“相关”侧栏中发现：我可以使用属性选择器而不是元素选择器

---

这显示了结果。

这些类型的组件是我最喜欢的。在一天结束时，假设你有这样的数据，你会想要下面这样的东西

carData = [{
   model: 'Mercedes',
   year: 2015,
   km: 10000
}, {
   model: 'Audi',
   year: 2016,
   km: 5000
}];

您希望按原样显示前两列，而对于最后一列，您希望显示一些自定义模板

首先为单元格的自定义主体模板定义一个指令。（您也可以对标题执行相同的操作）

@指令（{选择器：'[custom cell body]}）
导出类AppCellBodyTemplate{
构造函数（公共模板：TemplateRef）{}
}

让我们定义我们的
AppCellComponent

app cell.component.ts

@组件({
选择器：“应用程序单元”，
模板：``
})
导出类AppCellComponent{
@输入（）头；
@输入（）字段；
@Input（）样式类；
@ContentChild（AppCellBodyTemplate）customBody:AppCellBodyTemplate；
}

让我们将它们粘在
AppTableComponent

app table.component.ts

@组件({
选择器：“应用程序表”，
templateUrl:“./app table.component.html”
})
导出类AppTableComponent{
@输入（）数据：任意[]；
@ContentChildren（AppCellComponent）单元格：QueryList；
}

app table.component.html


{{cell.header}
{{row[cell.field]}

这里有几点需要解释


template:TemplateRef
在
AppCellBodyTemplate
由于我们将始终使用
自定义体细胞
和
ng模板
s，因此我们可以获得在中定义的模板的引用。此
模板
将在
*ngTemplateOutlet
@ContentChild（AppCellBodyTemplate）在
AppCellComponent
中的customBody
用于检测是否存在定义为
ContentChild
@ContentChildren（AppCellComponent）cells:QueryList
用于获取
cells
的实例（您做了类似的事情）
context:{$implicit:row}
是向该组件的使用者公开一些数据
$implicit
使您能够使用所需的任何模板变量检索此上下文。因为我在这里使用了
$implicit
，所以我可以这样做
，否则，我必须定义我的
car
变量，类似这样的
let car=“rowData”
但是，您仍然必须在模板中编写
td
。我将发布一个更好的方法来实现这一点。我喜欢它的外观。像往常一样，任何有棱角的东西，我都需要几个小时才能弄清楚到底发生了什么（还有谷歌搜索我以前没见过的东西——看看你的
$implicit
，但乍一看它看起来不错！谢谢。不客气。我会用评论解释一些小细节。@GaryMcGill补充了一些解释。让我困惑的一件事是需要AppCellBodyTemplate指令，它似乎做得很少。我想知道为什么这是必要的，并尝试在没有它的情况下重新制作您的示例。请参阅。它似乎有效-您认为我使用这种方法会失去任何功能吗？将来，您将需要另一个模板来自定义标题（我自己开发了一个表组件）。当您确实需要时，您必须选择具有不同查询的不同模板。在此之前，您的模板似乎还可以。
<app-cell class="foo">
  <td>
    <div>...</div>
  </td>
</app-cell>

carData = [{
   model: 'Mercedes',
   year: 2015,
   km: 10000
}, {
   model: 'Audi',
   year: 2016,
   km: 5000
}];