각도 구조 명령, 섹션 1: NgIf

Michi DeWitt | ng conf | 2020년 10월
이것은 내장된 각도 구조 명령을 포함하는 시리즈의 첫 번째 부분이다.이 시리즈는 경험이 있는 새로운 개발자를 대상으로 한다.

소개하다.

각도 응용에 내장된 구조 지령 시리즈의 첫 번째 부분에 오신 것을 환영합니다!이 시리즈에서는 구조 명령이 무엇인지 소개하고 내장된 구조 명령을 어떻게 사용하는지 안내할 것이다.

무엇이 구조 지령입니까?

구조 명령을 사용하면 개발자가 DOM을 특정 방식으로 조작할 수 있습니다.이러한 작업은 페이지의 요소를 추가, 삭제 또는 변경하여 수행됩니다.구조 명령은 템플릿의 HTML 요소에 속성으로 추가됩니다.요소마다 하나의 구조 명령만 추가할 수 있으며, 이 명령은 원소의 다른 속성과 구분하기 위해 항상 *를 접두사로 해야 한다.
Angular에는 DOM 제어에 사용할 수 있는 몇 가지 내장 명령이 포함되어 있습니다.대부분의 명령은 어셈블리의 값을 기준으로 DOM을 조작합니다.페이지 내용은 구성 요소 값 및/또는 사용자 작업에 따라 자주 변경되는 동적 응용 프로그램에서 유용합니다.일반적인 HTML과Javascript를 사용하면 동적 내용을 얻기 어렵지만 Angular의 구조화 명령을 사용하는 것은 쉬운 일입니다!
주의: 본 시리즈의 내장 지령만 주목하지만 개발자도 자신의 사용자 정의 구조 지령을 구축할 수 있습니다.

구조 명령을 어떻게 사용합니까?

구조 명령을 사용하려면 각도 템플릿의 모든 요소에 이 명령을 속성으로 추가하면 됩니다.structural directive 속성의 접두사는 *입니다.
예:

<div *someDirective class="my-class" (click)="doSomething()"></div>

위의 코드 세션에서 someDirective 접두사로 인해structural 명령어div는 * 요소에서 쉽게 구분된다.
명령어도 구성 요소의 속성에 귀속될 수 있습니다.
예:

<div *someOtherDirective="someProperty" class="my-class" 
(click)="doSomething()"></div>

위의 코드 세션에서structural 명령어someOtherDirective는component 속성someProperty에 귀속됩니다.
본문에서 우리는 가장 자주 사용하는 지령 중 하나인 ngIf를 소개할 것이다.

NgIf 명령은 무엇입니까? 어떻게 사용합니까?

ngIf 명령은 DOM에서 요소를 조건부로 추가하거나 제거하는 데 사용됩니다.다음과 같은 기능을 통해 요소를 쉽게 표시하고 숨길 수 있으므로

필요한 경우에만 구성 요소 초기화

더 이상 필요하지 않을 경우 구성 요소 제거

필요 없을 때 비싼 구성 요소를 추가하지 마십시오

ngIf 지령의 문법은 자바스크립트의 조건if문장과 매우 유사하여 개발자가 쉽게 직관적으로 사용할 수 있다.(이것은 AngularJS의 ngIf 명령과 거의 같다.
이 명령은 다음과 같은 경우에 특히 적용됩니다.

사용자의 작업에 따라 콘텐츠를 추가/삭제하고자 하십시오

일부 구성 값에 따라 컨텐츠를 추가/삭제하시겠습니까

구성 요소

의 하나 이상의 값을 기준으로 컨텐츠 추가/삭제

기본 용도:

<div *ngIf="someCondition">
  I want to show this if someCondition is truthy!
</div>

ngIf 명령은 DOM에 조건부로 추가할 요소에 속성으로 추가됩니다.이 명령은 요소에 대한 추가 또는 삭제 여부를 결정하는 데 사용되는 조건에 바인딩됩니다.
구성 요소가 처음 초기화되면 모든 조건ngIf 값이 확인되고 다음과 같은 상황이 발생합니다.

조건이 truthy인 경우 요소가 DOM

에 추가됩니다.

조건이 falsy인 경우 DOM에 요소가 추가되지 않습니다

.
이렇게 간단해!
변경 감지에 따라 조건이 변경되면 Angular 명령이 적용되는 요소는 새 조건 값에 따라 적절하게 삭제되거나 DOM에 추가됩니다.ngIf 지령의 위력이 미묘할 수 있기 때문에 가장 중요한 부분을 다시 한 번 강조합시다.

NgIf 조건의 계산 결과가 falsy인 경우 이 요소는 DOM에 숨겨지지 않습니다.그것은 완전히 제거되었거나 전혀 추가되지 않았다.

페이지의 한 단락의 텍스트에 대해 이것은 중요하지 않은 것 같다.그러나 더 비싼 구성 요소와 결합하여 사용하면 커다란 성능 영향 (좋은 것과 나쁜 것) 을 볼 수 있습니다.ngIf 명령의 조건은 구성 요소의 속성에 직접 귀속될 수 있습니다.
예:

*ngIf="someProperty"

또는 조건은 브리 표현식에 귀속될 수 있습니다.
예:

*ngIf="someProperty !== undefined"

ngIf 지령을 쉽게 사용할 수 있는 이유는 많은 Angular 개발자들이 이미 익숙한if문장인 자바스크립트 문법과 매우 가깝기 때문이다.위의 HTML 구문을 다음과 같이 매핑할 수 있습니다.

if (someCondition) {
  // Execute the code in this block
}

Else 청크
일반적으로 ngIf 명령의 조건이 falsy라면 다른 템플릿을 표시해야 한다.두 번째 ngIf 명령을 추가해서 같은 조건이 falsy인지 확인하려고 할 수도 있습니다.

<div *ngIf="someCondition">
  If someCondition is truthy, show this
</div>

<!-- Avoid! This is an anti-pattern. -->
<div *ngIf="!someCondition">
  Otherwise I want to show this
</div>

하지만 더 좋은 방법이 있어!

<div *ngIf="someCondition; else otherBlock">
  If someCondition is truthy, show this
</div>

<ng-template #otherBlock>
  Otherwise I want to show this
</ng-template>

자바스크립트의 전통if문장과 같이 ngIf 명령의 조건이 falsy 인 경우 다른 템플릿을 추가할 수 있습니다.
그런데 왜 이게 더 좋아요?

우선, 이것은 템플릿에 뚜렷하고 이해하기 쉬운 논리 흐름을 제공한다.

이것은 당신의 조건 논리를 한 곳에 유지시킨다.위에 표시된 역모드의 경우 한 위치ngIf 조건이 변경되면 두 위치 모두 변경해야 합니다.이것은 매우 약하고 잘못되기 쉽다.

HTML 템플릿에 의미 있는 부분을 추가할 수 있습니다ng-template.그것은 ngIf 명령 아래에 직접 있을 필요가 없다.이것은 템플릿의 조직 방식을 더욱 잘 제어할 수 있도록 합니다.

개념적으로 대부분의 Angular 개발자들이 이미 잘 알고 있는if-else 문장 문법과 매우 비슷하다.

f (someCondition) {
  // Execute this code block
} else {
  // Execute this other block
}

스토리지 NgIf 값

템플릿의 여러 위치에서 ngIf 조건을 사용한 결과는 적지 않다.ngIf조건이 사용async관의 관찰 대상에 귀속되었을 때 이런 상황은 매우 흔하다.
하나의 옵션은 ngIf 조건 결과가 필요한 모든 위치에 조건을 추가하는 것입니다.

<div *ngIf="tableData$ | async">
  My Conditional Table
  <my-table-component [data]="tableData$ | async"></my-table-component>
</div>

그래도 더 좋은 방법이 있어!

<div *ngIf="tableData$ | async">
  My Conditional Table
  <my-table-component [data]="tableData$ | async"></my-table-component>
</div>

as 문법은 조건의 결과를 국부 변수로 템플릿에 저장할 수 있도록 합니다.이제 이 값을 템플릿의 다른 위치에서 쉽게 재사용할 수 있습니다.
그런데 왜 이게 더 좋아요?

마찬가지로 이것은 응용 프로그램에서 뚜렷하고 이해하기 쉬운 논리 흐름을 제공한다.

마찬가지로 조건 논리를 한 위치에 유지할 것이다.

관찰 대상에 대한 두 번째 구독을 만들 필요가 없습니다.

요약

이것이 바로 tableData$ 지령에 대해 당신이 알아야 할 모든 것입니다!
요점을 다시 한 번 살펴보겠습니다.
🛠 구조화 명령은 개발자에게 구성 요소의 데이터를 바탕으로 DOM을 제어하는 간단한 방법을 제공했다
🏗 구조 명령을 각도 템플릿의 엔티티에 추가할 수 있습니다.
🎯 ngIf 명령을 사용하면 명령에 직접 바인딩된 조건 값에 따라 DOM을 제어할 수 있습니다.
➕ ngIf 조건이 ngIf인 경우 요소는 DOM에 추가됩니다.
➖ truthy 조건이 ngIf인 경우 DOM에서 요소가 제거됩니다.
💪 Angular 팀이 제공하는 모든 기능을 활용하려면 falsy 및 else 구문을 사용합니다.

뮤지컬이 곧 옵니다.

ng conf: 뮤지컬은 2021년 4월 22일과 23일 이틀간 회의를 연다.ng-conf.org로 문의하십시오.

기타 아이디어 및 리소스

각 구조 명령 파일: https://angular.io/guide/structural-directives#structural-directives

각도as 파일: https://angular.io/api/common/NgIf

본 블로그의 많은 예에서 내가 코드에 *ngIf를 추가한 유일한 이유는 구조 지령을 추가했기 때문이다.이 경우 DOM에 추가 div를 추가하지 않도록 div를 사용하는 것이 좋습니다.이 시리즈의 뒷부분에서 더 많은 설명을 드리겠습니다.