Question

我正在尝试使用angular2 2.0.0-beta.0

我有一个表，行内容由angular2以这种方式生成：

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

现在这有效，我想将内容封装到一个组件＆＃34; table-line＆＃34;。

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

在组件中，模板具有＆lt; tr＆gt;＆lt; td＆gt;内容。

但是现在桌子没有更多工作了。这意味着，内容不再显示在列中。在浏览器中，检查器向我显示DOM元素如下所示：

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

我该如何做到这一点？

Answer 1

将现有的表格元素用作选择器

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

使用<template>

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

属性选择器

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

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

像

一样使用

<tr my-tr>

Answer 2

我发现这个例子非常有用，但它在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(); }
}

Answer 3

以下是使用带有属性选择器的组件的示例：

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）plunker。

Answer 4

为组件样式添加“显示：内容”对我来说很容易。

CSS：

.table-line {
    display: contents;
}

HTML：

<table>
    <table-line class="table-line" [data]="line">
    </table-line>
</table>

为什么行得通？

实例化组件时，按角度（在编译后）将组件的内容包装在DOM中，如下所示：

<table>
    <table-line>
        <tr></tr>
    </table-line>
</table>

但是为了使表格正确显示，tr标签不能用任何东西包装。

因此，我们将display: contents添加到此新元素。据我了解，这样做是要告诉资源管理器不应渲染此标记，并显示内部内容，就好像没有环绕。因此，尽管标签仍然存在，但它对表不会产生视觉影响，并且tr标签被视为table标签的直接子元素。

如果您想进一步调查内容的工作方式，请执行以下操作： https://bitsofco.de/how-display-contents-works/

Answer 5

试试这个

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

Angular2表行作为组件

5 个答案:

为什么行得通？