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

Program / 글쓴이

ng-container Angular 2 설명서에 언급되어 있지만 작동 방식과 사용 사례에 대한 설명은 없습니다.

그것은 특히에서 언급 ngPlural하고 ngSwitch지시.

<ng-container>와 같은 작업을 수행 합니까 <template>, 또는 명령 중 하나를 사용하도록 지시문을 작성했는지 여부에 따라 다릅니다.

아르

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

과

<template [ngPluralCase]="'=0'">there is nothing</template>

동일해야합니까?

우리는 그들 중 하나를 어떻게 선택합니까?

<ng-container>사용자 지정 지시문에 어떻게 사용할 수 있습니까?

답변

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

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

답변

설명서 ( https://angular.io/guide/template-syntax#!#star-template )는 다음 예제를 제공합니다. 다음과 같은 템플릿 코드가 있다고 가정 해보십시오.

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

렌더링되기 전에 “설탕 제거”됩니다. 즉, 별표 표기법이 표기법으로 표기됩니다.

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

‘currentHero’가 진실 인 경우 다음과 같이 렌더링됩니다. 

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

그러나 다음과 같은 조건부 출력을 원한다면 어떻게해야합니까?

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

.. 그리고 출력물을 컨테이너에 싸고 싶지 않습니다.

설탕 제거 버전을 다음과 같이 직접 작성할 수 있습니다.

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

그리고 이것은 잘 작동합니다. 그러나 이제 별표 * 대신 대괄호 []가 있어야 ngIf가 필요합니다. https://github.com/angular/angular.io/issues/2303 )

이러한 이유로 다음과 같이 다른 표기법이 작성되었습니다.

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

두 버전 모두 동일한 결과를 생성합니다 (h1 및 p 태그 만 렌더링 됨). 두 번째는 항상 선호하는 * ngIf를 사용할 수 있기 때문에 선호됩니다.

답변

Imo 사용 사례 ng-container는 사용자 지정 템플릿 / 구성 요소가 과도하게 사용 되는 간단한 교체입니다. API 문서에서 다음을 언급합니다.

ng-container를 사용하여 여러 루트 노드를 그룹화

그게 전부입니다. 물건 그룹화.

주의하십시오 ng-container지시가 떨어진 대신 지시어는 실제 내용을 랩하는 템플릿으로 떨어진다.

답변

* ngIf 및 * ngFor와 함께 테이블을 사용하려는 경우 유스 케이스-div를 td / th에 넣으면 테이블 요소가 잘못 작동 합니다. 나는이 문제에 직면했고 그 대답이었다.

답변