Angular2 ตารางแถวเป็นส่วนประกอบ

Question 1

ฉันกำลังทดลองกับ 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> ....

ฉันจะทำงานนี้ได้อย่างไร?

Question 2

ใช้องค์ประกอบตารางที่มีอยู่เป็นตัวเลือก

องค์ประกอบตารางไม่อนุญาตให้<table-line>องค์ประกอบเป็นเด็กและเบราว์เซอร์จะลบออกเมื่อพบ คุณสามารถรวมไว้ในองค์ประกอบและยังคงใช้<tr>แท็กที่อนุญาต เพียงใช้"tr"เป็นตัวเลือก

โดยใช้ <template>

<template>ควรได้รับอนุญาตเช่นกัน แต่ยังใช้ไม่ได้กับทุกเบราว์เซอร์ Angular2 ไม่เคยเพิ่ม<template>องค์ประกอบลงใน DOM แต่จะประมวลผลภายในเท่านั้นดังนั้นจึงสามารถใช้กับเบราว์เซอร์ทั้งหมดที่มี Angular2 ได้เช่นกัน

ตัวเลือกแอตทริบิวต์

อีกวิธีหนึ่งคือการใช้ตัวเลือกแอตทริบิวต์

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

ที่จะใช้เช่น

<tr my-tr>

Question 3

ฉันพบว่าตัวอย่างมีประโยชน์มาก แต่มันใช้ไม่ได้ในบิลด์ 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(); }
}

Question 4

นี่คือตัวอย่างการใช้ส่วนประกอบที่มีตัวเลือกแอตทริบิวต์:

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

Question 5

การเพิ่ม 'display: contents' ให้กับรูปแบบส่วนประกอบได้ผลสำหรับฉัน

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/

Question 6

ลองดู

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