[angular] <ng- 컨테이너> vs <서식 파일>

편집 : 이제 문서화되었습니다.

<ng-container> 구조에

Angular  <ng-container> 는 스타일이나 레이아웃을 방해하지 않는 그룹화 요소로, Angular는 DOM에 넣지 않기 때문에 스타일이나 레이아웃을 방해하지 않습니다.

(…)

는  <ng-container> 각 파서 인식 신택스 요소이다. 지시어, 구성 요소, 클래스 또는 인터페이스가 아닙니다. JavaScript if-block의 중괄호와 비슷합니다.

  if (someCondition) {
      statement1;
      statement2;
      statement3;
     }

이러한 중괄호가 없으면 JavaScript는 모든 명령문을 단일 블록으로 조건부로 실행하려는 경우에만 첫 번째 명령문을 실행합니다. <ng-container> 만족 각도 템플릿에서 유사한 필요.

원래 답변 :

이 풀 요청 에 따르면 :

<ng-container> 노드를 그룹화하는 데 사용할 수 있지만 DOM 트리에서 노드로 렌더링되지 않는 논리 컨테이너입니다.

<ng-container> HTML 주석으로 렌더링됩니다.

따라서이 각도 템플릿 :

<div>
    <ng-container>foo</ng-container>
<div>

이런 종류의 출력을 생성합니다.

<div>
    <!--template bindings={}-->foo
<div>

따라서 응용 프로그램에서 ng-container요소 그룹을 조건부로 추가 (예 : 사용 *ngIf="foo") 하고 다른 요소로 래핑하지 않으려 는 경우에 유용합니다 .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

그런 다음 생산합니다 :

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

답변

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

<hero-detail> [...] </hero-detail>

<h1>Title</h1><br>
<p>text</p>

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>