[angular] 구성 요소로서의 Angular2 테이블 행

Program / 글쓴이

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> ....

이 작업을 어떻게 할 수 있습니까?

답변

기존 테이블 요소를 선택기로 사용

테이블 요소는 <table-line>요소를 자식으로 허용하지 않으며 브라우저 는 요소를 찾으면 제거합니다. 구성 요소로 래핑하고 허용 된 <tr>태그를 계속 사용할 수 있습니다. "tr"선택기로 사용하십시오 .

사용 <template>

<template>허용되어야하지만 아직 모든 브라우저에서 작동하지는 않습니다. Angular2는 실제로 <template>DOM에 요소를 추가하지 않고 내부적으로 만 처리하므로 Angular2를 사용하는 모든 브라우저에서도 사용할 수 있습니다.

속성 선택자

또 다른 방법은 속성 선택기를 사용하는 것입니다.

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

같이 사용

<tr my-tr>

답변

예제가 매우 유용하다는 것을 알았지 만 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(); }
}

답변

다음은 속성 선택기가있는 구성 요소를 사용하는 예입니다.

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의 템플릿이 더 관련되어 있지만 아이디어를 얻을 수 있습니다.

이전 (베타 .0) 플 런커 .

답변

구성 요소 스타일에 ‘디스플레이 : 콘텐츠’를 추가하는 것은 저에게 효과적이었습니다.

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/

답변

이 시도

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

답변