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>

在组件中,模板具有<tr> <td>内容.

但是现在桌子不再有用了.这意味着,内容不再显示在列中.在浏览器中,检查器向我显示DOM元素如下所示:

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

我怎样才能做到这一点？

Answer 1

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

table元素不允许<table-line>元素作为子元素,浏览器只在找到元素时将其删除.您可以将其包装在组件中,并仍然使用allowed <tr>标记.只需"tr"用作选择器.

运用 <template>

<template>也应该被允许但在所有浏览器中都不起作用.Angular2实际上从不<template>向DOM 添加元素,但只在内部处理它们,因此这也可以在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>

为什么这有效？

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

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

但是为了让表格正确显示，tr标签不能被任何东西包裹。

因此，我们将display: contents,添加到这个新元素中。据我了解，这样做是告诉资源管理器不应呈现此标签，并显示内部内容，就好像没有环绕一样。因此，虽然标签仍然存在，但它不会影响表格的视觉效果，并且tr标签被视为标签的直接子代table。

如果您想进一步研究内容的工作原理：https : //bitsofco.de/how-display-contents-works/