Angular2 : 래핑 태그없이 컴포넌트 렌더링

Angular2 : 래핑 태그없이 컴포넌트 렌더링

---

나는 이것을 할 방법을 찾기 위해 고군분투하고 있습니다. 상위 구성 요소에서 템플릿은 a table및 해당 thead요소를 설명 하지만 tbody다음과 같이 다른 구성 요소에 렌더링을 위임 합니다.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

각 myResult 구성 요소는 tr기본적으로 다음과 같이 자체 태그를 렌더링합니다 .

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

myResult 구성 요소가 필요하지 않고 부모 구성 요소에 직접 넣지 않는 이유는 myResult 구성 요소가 실제로 여기에 표시된 것보다 더 복잡하기 때문에 별도의 구성 요소와 파일에 해당 동작을 넣고 싶습니다.

결과 DOM이 나빠 보입니다. 요소 tbody만 포함 할 수 있기 때문에 (MDN 참조) 유효하지 않기 때문이라고 생각 하지만 생성 된 (단순화 된) DOM은 다음과 같습니다.tr

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

동일한 것을 렌더링 할 수 있지만 래핑 <my-result>태그 없이 구성 요소를 사용하여 테이블 행 렌더링을 단독으로 수행 할 수있는 방법이 있습니까?

내가 살펴 보았다 ng-content, DynamicComponentLoader의 ViewContainerRef,하지만 그들은 지금까지 내가 볼 수있는이에 대한 해결책을 제공하지 않는 것.

---

속성 선택기를 사용할 수 있습니다.

@Component({
  selector: '[myTd]'
  ...
})

다음과 같이 사용하십시오.

<td myTd></td>

---

요소에이 지시문 사용

@Directive({
   selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
       const parentElement = el.nativeElement.parentElement;
       const element = el.nativeElement;
       parentElement.removeChild(element);
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
   }
}

사용 예 :

<div class="card" remove-wrapper>
   This is my card component
</div>

부모 html에서는 평소처럼 카드 요소를 호출합니다. 예를 들면 다음과 같습니다.

<div class="cards-container">
   <card></card>
</div>

출력은 다음과 같습니다.

<div class="cards-container">
   <div class="card" remove-wrapper>
      This is my card component
   </div>
</div>

---

"ViewContainerRef"가 필요하고 my-result 구성 요소 내부에서 다음과 같은 작업을 수행합니다.

html :

<ng-template #template>
    <tr>
       <td>Lisa</td>
       <td>333</td>
    </tr>
 </ng-template>

ts :

@ViewChild('template') template;


  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    this.viewContainerRef.createEmbeddedView(this.template);
  }

참고 URL : https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag