vs
ng-container
공식 매뉴얼에 기재되어 있습니다만, 아직 그 동작 원리와 사용 사례에 대해 이해하고 있습니다.
이는 특히 및 지침에서 언급됩니다.
그 중 하나를 사용하기 위한 지시가 작성되었는지 여부에 따라 같은 일이 이루어집니까?
아레
그리고
똑같다고 생각하시는 건가요?
둘 중 하나를 어떻게 골라야 하죠?
커스텀 디렉티브에서는 어떻게 사용할 수 있습니까?
[Edit] : 이것으로 문서화되어 있습니다.
<ng-container>
구출하기 위해
Angular는 스타일 또는 레이아웃을 방해하지 않는 그룹화 요소입니다. Angular는 스타일 또는 레이아웃을
DOM에 넣지 않기 때문입니다.
(...)
는 Angular 파서로
인식되는 구문 요소입니다.
명령어, 컴포넌트, 클래스 또는
인터페이스가 아닙니다.
이것은 JavaScript if-block의
중괄호에 가깝습니다.
if (someCondition) {
statement1;
statement2;
statement3;
}
이러한 중괄호가 없으면 JavaScript는 조건부로 모든 중괄호를 단일
블록으로 실행하려는 경우에만 첫 번째 문을 실행합니다.
는 Angular
템플릿에서도 동일한 요구를 충족합니다.
원답:
<ng-container>
는 노드 그룹화에 사용할 수 있지만 노드로서
DOM 트리에 렌더링되지 않는 논리 컨테이너입니다.
<ng-container>
HTML
코멘트로 렌더링됩니다.
따라서 다음과 같은 각도 템플릿:
는 다음과 같은 종류의 출력을 생성합니다.
따라서 응용 프로그램에 요소 그룹을 조건부로 추가하고 싶지만 다른
요소로 래핑하고 싶지 않을 때 유용합니다.
<div>
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</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>
current의 경우
Hero'는 진부한 표현이다.
다만, 다음과 같은 조건부 출력을 필요로 하는 경우는 어떻게 해야 합니다.
<h1>Title</h1><br>
<p>text</p>
출력물이 용기에 포장되는 것을 원하지 않습니다.
다음과 같이 설탕 제거 버전을 직접 작성할 수 있습니다.
그리고 이건 잘 될 거야.
단, 지금은 아스타리스크* 대신 괄호[]를 붙여야 합니다.이것이 혼란스럽습니다(https://github.com/angular/angular.io/issues/2303)
이 때문에 다음과 같은 다른 표기법이 작성되었습니다.
두 버전 모두 동일한 결과를 생성합니다(h1 태그와 p 태그만 렌더링됨).
*ngIf를 항상 사용할 수 있기 때문에 두 번째 것이 좋습니다.
의 IMO 사용 사례는 커스텀템플릿/컴포넌트가 과잉될 수 있는 단순한 대체 수단입니다.
API 문서에서 다음과 같이 언급하고 있습니다.
ng-module을 사용하여 여러 루트노드를 그룹화합니다.
그게 다인 것 같아요. 그룹화라는 거죠.
지시문이 실제 내용을 감싸는 템플릿 대신 지시문이 사라집니다.
내 경우, 내 AngularFlex 스타일링과 비슷하거나 심지어 엉망이 되기도 합니다.
*ngIf 및 *ngFor - As div를 td/th에 넣으면 테이블 요소가 제대로 작동하지 않게 되는 경우의 사용 사례입니다.이 문제에 직면하여 답변이 되었습니다.
레퍼런스
URL : https://stackoverflow.com/questions/39547858/ng-container-vs-template
ng-container
공식 매뉴얼에 기재되어 있습니다만, 아직 그 동작 원리와 사용 사례에 대해 이해하고 있습니다.
이는 특히 및 지침에서 언급됩니다.
그 중 하나를 사용하기 위한 지시가 작성되었는지 여부에 따라 같은 일이 이루어집니까?
아레
그리고
똑같다고 생각하시는 건가요?
둘 중 하나를 어떻게 골라야 하죠?
커스텀 디렉티브에서는 어떻게 사용할 수 있습니까?
[Edit] : 이것으로 문서화되어 있습니다.
<ng-container>
구출하기 위해
Angular는 스타일 또는 레이아웃을 방해하지 않는 그룹화 요소입니다. Angular는 스타일 또는 레이아웃을
DOM에 넣지 않기 때문입니다.
(...)
는 Angular 파서로
인식되는 구문 요소입니다.
명령어, 컴포넌트, 클래스 또는
인터페이스가 아닙니다.
이것은 JavaScript if-block의
중괄호에 가깝습니다.
if (someCondition) { statement1; statement2; statement3; }
이러한 중괄호가 없으면 JavaScript는 조건부로 모든 중괄호를 단일
블록으로 실행하려는 경우에만 첫 번째 문을 실행합니다.
는 Angular
템플릿에서도 동일한 요구를 충족합니다.
원답:
<ng-container>
는 노드 그룹화에 사용할 수 있지만 노드로서
DOM 트리에 렌더링되지 않는 논리 컨테이너입니다.
<ng-container>
HTML
코멘트로 렌더링됩니다.
따라서 다음과 같은 각도 템플릿:
는 다음과 같은 종류의 출력을 생성합니다.
따라서 응용 프로그램에 요소 그룹을 조건부로 추가하고 싶지만 다른
요소로 래핑하고 싶지 않을 때 유용합니다.
<div>
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</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>
current의 경우
Hero'는 진부한 표현이다.
다만, 다음과 같은 조건부 출력을 필요로 하는 경우는 어떻게 해야 합니다.
<h1>Title</h1><br>
<p>text</p>
출력물이 용기에 포장되는 것을 원하지 않습니다.
다음과 같이 설탕 제거 버전을 직접 작성할 수 있습니다.
그리고 이건 잘 될 거야.
단, 지금은 아스타리스크* 대신 괄호[]를 붙여야 합니다.이것이 혼란스럽습니다(https://github.com/angular/angular.io/issues/2303)
이 때문에 다음과 같은 다른 표기법이 작성되었습니다.
두 버전 모두 동일한 결과를 생성합니다(h1 태그와 p 태그만 렌더링됨).
*ngIf를 항상 사용할 수 있기 때문에 두 번째 것이 좋습니다.
의 IMO 사용 사례는 커스텀템플릿/컴포넌트가 과잉될 수 있는 단순한 대체 수단입니다.
API 문서에서 다음과 같이 언급하고 있습니다.
ng-module을 사용하여 여러 루트노드를 그룹화합니다.
그게 다인 것 같아요. 그룹화라는 거죠.
지시문이 실제 내용을 감싸는 템플릿 대신 지시문이 사라집니다.
내 경우, 내 AngularFlex 스타일링과 비슷하거나 심지어 엉망이 되기도 합니다.
*ngIf 및 *ngFor - As div를 td/th에 넣으면 테이블 요소가 제대로 작동하지 않게 되는 경우의 사용 사례입니다.이 문제에 직면하여 답변이 되었습니다.
레퍼런스
URL : https://stackoverflow.com/questions/39547858/ng-container-vs-template
'source' 카테고리의 다른 글
| HATEOAS 링크 및 참조는 JSON에서 어떻게 처리해야 합니까? (0) | 2023.03.18 |
|---|---|
| 스프링 부트로 JSP를 JAR 패키징으로 제공할 수 있습니까? (0) | 2023.03.18 |
| 크롬 디버거에서 모든 VM 스크립트를 블랙박스할 수 있습니까? (0) | 2023.03.18 |
| WordPress 플러그인 업데이트를 비활성화하려면 어떻게 해야 합니까? (0) | 2023.03.18 |
| JSX 요소를 어레이에 연결하려면 어떻게 해야 합니까? (0) | 2023.03.18 |