Angular2表行作为组件

Question

我正在实验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> ....我该如何进行这项工作？

Answer 1

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

table元素不允许将<table-line>元素作为子元素，浏览器只会在找到它们时将其删除。您可以将其包装在组件中，并仍然使用允许的<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）矮人。