구성요소로 각진 2개의 테이블 행
나는 angular22.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는 실제로 절대 a를 추가하지 않습니다.<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
물론 MyTr Component의 템플릿이 더 많이 관여하겠지만, 이해할 수 있습니다.
오래된(베타.0) 플런커입니다.
저는 구성요소 스타일에 '표시: 내용'을 추가했습니다.
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/ .
이것을 먹어보세요.
@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{}
언급URL : https://stackoverflow.com/questions/34556277/angular2-table-rows-as-component
'programing' 카테고리의 다른 글
| 언제 'npm start'를 사용하고 언제 'ng serve'를 사용합니까? (0) | 2023.05.12 |
|---|---|
| ASP에서 현재 도메인 이름을 가져오는 방법.그물 (0) | 2023.05.12 |
| 호출 스레드는 STA여야 합니다. 많은 UI 구성 요소에서 이 작업이 필요하기 때문입니다. (0) | 2023.05.07 |
| 대/소문자를 구분하지 않는 목록 정렬, 낮은 대/소문자 구분 없이? (0) | 2023.05.07 |
| 데이터베이스가 생성된 이후 컨텍스트를 지원하는 모델이 변경되었습니다. (0) | 2023.05.07 |