ng2-ng-container와 ng-template 태그의 차이점

ng2-ng-container와 ng-template 태그의 차이점

---

누군가 <ng-container>와 <ng-template>요소 사용의 차이점을 설명해 주 시겠습니까?

문서를 사용할 수 없었고 NgContainer템플릿 태그의 차이점을 이해하지 않습니다.

각각의 코드 예제가 큰 도움이 될 것입니다.

---

둘 다 현재 (2.x, 4.x) 페이지에서 사용되는 데 사용되는 요소 (예 : div또는 span) 를 도입하지 않습니다 .

template그러나 불쾌한 구문이 필요합니다. 예를 들면

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

될 것이다

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

예상하고 이미 익숙한 ng-container멋진 *구문을 사용 하기 때문에 대신 사용할 수 있습니다 .

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

GitHub 에서이 토론을 개발면 자세한 내용을 확인할 수 있습니다 .

---

4.x <template>에서는 더 이상 사용하지 않습니다 <ng-template>.

---

사용하다

• <ng-container>*ngIf또는 같은 중첩 된 구조 지시문에 대한 도우미 요소가 필요한 경우 또는 선언문 내부에 둘 이상의 요소를 래핑하려는 경우;*ngFor
• <ng-template>당신이보기를해야 할 경우 사용하여 다양한 장소에서 도장 할 것인지 "니펫을" ngForTemplate, 또는 .ngTemplateOutletcreateEmbeddedView()

---

ng-templateng-if, ng-for및 같은 구조적 지시문에 사용 ng-switch됩니다. 구조적 지시문없이 사용하면 아무 일도 일어나지 않습니다.

ng-container래퍼 또는 상위 컨테이너가 없을 때 사용합니다. 대부분의 경우 div또는 span컨테이너로 사용하지만 여러 경우에 여러 구조적 지시문을 사용하려는 경우입니다. 하지만 한 요소에 구조적 지시문을 두 개 이상 사용할 수 없습니다.이 경우 ng-container컨테이너로 사용할 수 있습니다.

---

ng-template이름에서 알 수있는 템플릿을 나타냅니다 . 그 자체는 아무것도하지 않습니다. 를 사용 ng-container하여 템플릿을 동적으로 사용 하는 자리 표시 제공 할 수 있습니다 .

에 대한 또 다른 사용 사례 ng-template는 여러 구조 지시문을 함께 중첩하는 데 사용할 수있는 것입니다. 이 블로그 게시물에서 훌륭한 예제를 사용할 수 있습니다 : angular ng-template / ng-container

---

간단히 말해서 , ng-container은 하위 구성 요소와 지원하는 React 의 더 높은 구성 요소 입니다.

ng-template기본적으로 Angular의 내부 구현을위한 내부 , 내부의 모든 것이 ng-template완전히 제거되고 기본적으로 뷰 소스에 대한 주석이 처리됩니다. 이것은 ngIf, ngSwitch등과 같은 각도의 내부 지시문과 함께 사용되어야합니다 .

---

ng-template은 진정한 가치를 보여줍니다.

<ng-template>
    This is template block
</ng-template>

다수 :

ng-container show without condition은 콘텐츠도 표시합니다.

<ng-container>
    This is container.
</ng-container>

출력 :
컨테이너입니다.

---

NG 템플릿
은 <ng-template>HTML에 대한 각도 요소입니다. 직접 표시되지 않습니다. ngIf, ngFor, ngSwitch, ..와 같은 구조적 지시문에 사용합니다.
예 :

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular는 * ngIf 속성을 <ng-template>이와 같이 호스트 요소를 사용하는 요소 로 변환합니다 .

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
비용 호스트 요소가 없을 때 그룹화 요소를 사용합니다.
예 :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

작동하지 않습니다. 일부 HTML 요소는 모든 직계 하위 항목이 특정 유형이어야합니다. 예를 들어 <select>요소에는 마이너스가 필요합니다. 옵션을 조건부 또는 <span>.

이 시도 :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

작동합니다.

추가 정보 : Angular Structural Directive

참고 URL : https://stackoverflow.com/questions/40529537/ng2-difference-between-ng-container-and-ng-template-tags