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

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

누가 사용하는 것의 차이점을 설명해 주시겠습니까?<ng-container>그리고.<ng-template>요소들?

에 대한 문서를 수.NgContainer템플릿 태그의 차이를 잘 이해하지 못합니다.

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

요소(예: 2를데 됩니다.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 4.x에서는<template>더 이상 사용되지 않으며 다음으로 변경됩니다.<ng-template>.

---

사용하다

• <ng-container> 또는 와 같은 중첩된 구조 지시어에 대한 도우미 요소가 필요하거나 이러한 구조 지시어 내부에 둘 이상의 요소를 래핑하려는 경우;
• <ng-template>다양한 장소에서 스탬프를 찍고 싶은 뷰 "스켓"이 필요한 경우ngForTemplate, 또는 .

ng-template는 다과같은지사용다니됩침에조구음▁like다▁directiveural▁used니▁the▁is▁struct▁for사와 같은 구조적 지시어에 사용됩니다.ng-if,ng-for그리고.ng-switch구조 지시 없이 사용하면 아무 일도 일어나지 않고 렌더링됩니다.

ng-container적절한 래퍼 또는 상위 컨테이너가 없을 때 사용됩니다.대부분의 경우 다음을 사용합니다.div또는span컨테이너로서 그러나 이러한 경우에는 여러 구조적 지시를 사용하고자 할 때.하지만 하나의 요소에 대해 하나 이상의 구조적 지시를 사용할 수는 없습니다, 그 경우,ng-container할 수 .

그<ng-template>HTML을 렌더링하기 위한 Angular 요소입니다.직접 표시되지 않습니다.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>

.
적합한 호스트 요소가 없는 경우 그룹화 요소로 사용합니다.
예:

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

이것은 효과가 있을 거예요.

추가 정보:각도 구조 지시

ng-module은 참 값을 나타냅니다.

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

출력:

조건 없는 ng-discovery 쇼도 내용을 보여줍니다.

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

출력:
이것은 컨테이너입니다.

ng-template이름에서 알 수 있듯이 템플릿을 나타냅니다.그 자체로는 아무것도 만들어내지 못합니다.사용할 수 있습니다.ng-container템플리트를 동적으로 렌더링할 플레이스홀더를 제공합니다.

의 다른 사용 사례ng-template여러 개의 구조적 지침을 함께 내포하는 데 사용할 수 있습니다.여기 블로그 게시물에서 좋은 예를 찾을 수 있습니다: 각 ng-template/ng-container.

좋아해요<ng-container>Angular.component.html 파일에서 가능한 한 "logic"과 "markup"을 분리하는 방법입니다.

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

그렇게 하면 HTML에서 변경할 수 있습니다.<table>한 무리의 사람들과 같은 다른 것으로.<div>플렉스박스 스타일링을 사용하면 내부에서 루프 로직을 "조각화"할 필요가 없습니다(또는 완전히 손실될 위험이 없습니다.<tr>또한 루프(ngFor) 로직이 일반 html에 의해 부분적으로 가려지는 것을 방지합니다.

간단히 말하면,ng-container하위 요소의 렌더링에만 도움이 되는 React의 상위 구성 요소와 같습니다.

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

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