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, ngTemplateOutlet또는 createEmbeddedView().

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

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

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

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

산출:

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

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

출력 :
컨테이너입니다.

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

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

간단히 말해서, ng-container높은 구성 요소처럼 자식 요소의 렌더링에만 도움이되는 React .

ng-template기본적으로 Angular의 내부 구현을위한 것으로 , 내부의 모든 것은 ng-template렌더링하는 동안 완전히 무시되고 기본적으로 뷰 소스에 대한 주석이됩니다. 이것은 ngIf, ngSwitch등과 같은 Angular의 내부 지시문과 함께 사용되어야합니다 .

나는 좋아한다 <ng-container> 각도 .component.html 파일에 가능한 한 "마크 업"에서 "논리"를 분리하는 방법으로.

(일부) html 테이블의 행을 렌더링하는 예제 :

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

이렇게하면 플렉스 박스 스타일링 <table>을 <div>사용 하는 것과 같이 HTML 에서 다른 것으로 변경하려는 경우 <tr>. 또한 루핑 (ngFor) 로직이 일반 html에 의해 부분적으로 가려지지 않도록합니다.