홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

Angular에서 구조 지시문을 사용하는 방법은 무엇입니까?

저자：Eve Cole 업데이트 시간：2023-04-04 10:28:14

이 글은 Angular의 구조적 지시어 패턴을 안내하고, 구조적 지시어가 무엇인지, 어떻게 사용하는지 소개합니다. 여러분에게 도움이 되기를 바랍니다!

63036ae8287d7167.jpg

마스터 과정에 대한 프런트 엔드(vue) 항목: 학습 항목 입력

Angular 에는 두 가지 유형의 지시문이 있습니다. 속성 지시문은 DOM 요소의 모양이나 동작을 수정합니다. 구조적 지시어는 DOM 요소를 추가하거나 제거합니다.

구조적 지시문은 Angular 의 가장 강력한 기능 중 하나이지만 자주 오해됩니다.

구조 지시문에 대해 배우고 싶다면 해당 지시어가 무엇인지, 어떤 용도로 사용되는지, 프로젝트에서 어떻게 사용하는지 읽어보고 알아보세요. [관련 추천 튜토리얼: "Angular 튜토리얼"]

무엇을 배울 것인가

이번 글에서는 Angular 구조적 지시 패턴에 대해 알아봅니다. 당신은 그것이 무엇인지, 어떻게 사용하는지 알게 될 것입니다.

이 기사를 공부한 후에는 이러한 지침을 더 잘 이해하고 실제 프로젝트에서 사용할 수 있습니다.

Angular 구조 지시문이란 무엇입니까?

Angular 구조 지시어는 DOM 의 구조를 변경할 수 있는 지시어입니다. 이러한 지침에 따라添加、移除或者替换元素할 수 있습니다. 구조적 지시문은 이름 앞에 * 기호가 있습니다.

Angular 에는 세 가지 표준 구조 지시문이 있습니다.

  • *ngIf - 표현식에서 반환된 부울 값을 기반으로 템플릿을 조건부로 포함합니다(예: 템플릿의 조건부 렌더링).

  • *ngFor - 배열을 반복합니다.

  • *ngSwitch - 일치하는 각 그래프를 렌더링합니다.

다음은 구조화된 지시문의 예입니다. 구문은 다음과 같습니다.

 <element ng-if="조건"></element>

조건문은 true 또는 false 여야 합니다.

 <div *ngIf="worker" class="name">{{worker.name}}</div>

Angular <ng-template> 요소를 생성한 다음 *ngIf 지시문을 적용합니다. 이는 [ngIf] 와 같이 대괄호 [] 내의 속성 바인딩으로 변환됩니다. 클래스 이름을 포함한 나머지 <div> 는 <ng-template> 에 삽입됩니다. 예를 들어:

 <ng-템플릿 [ngIf]="작업자">
<div class="name">{{worker.name}}</div>
</ng-템플릿>

Angular 구조 지시어는 어떻게 작동하나요?

구조적 지시어를 사용하려면 HTML 템플릿에 지시어가 포함된 요소를 추가해야 합니다. 그런 다음 지시문에 설정한 조건이나 표현식을 기반으로 요소를 추가, 삭제 또는 교체합니다.

구조적 지시문의 예

간단한 HTML 코드를 추가해 보겠습니다.

app.component.html 파일의 내용은 다음과 같습니다.

 <div style="text-align:center">
<h1>
환영
</h1>
</div>
<h2> <앱 일러스트레이션></app 일러스트레이션></h2>

*ngIf 지시문을 사용하는 방법

조건에 따라 요소를 표시할지 또는 제거할지 결정하려면 *ngIf 사용합니다. ngIf if-else 와 매우 유사합니다.

*ngIf 지시어는 표현식이 false 일 때 HTML 요소를 제거합니다. true 인 경우 요소의 복사본이 DOM 에 추가됩니다.

전체 *ngIf 코드는 다음과 같습니다.

 <h1>
	<button (click)="toggleOn =!toggleOn">ng-if 일러스트레이션</button>
</h1>
<div *ngIf="!toggleOn">
<h2>안녕하세요</h2>
<p>좋은 아침입니다. 보려면 버튼을 클릭하세요</p>
</div>
<시간>
<p>오늘은 월요일이며 기분을 좋게 만드는 더미 텍스트 요소입니다.</p>
<p>else 절을 ​​사용한 ngIf 지시어 이해</p>

*ngFor 지시문을 사용하는 방법

*ngFor 지시문을 사용하여 배열을 반복합니다. 예를 들어:

 <ul>

<li *ngFor="let wok of Workers">{{ wok }}</li>

</ul>

우리의 컴포넌트 TypeScript 파일:

 import { Component, OnInit } from '@angular/core';

@요소({
선택기: '앱 일러스트레이션',
templateUrl: './삽화.comComponent.html',
styleUrls: ['./삽화.comComponent.css']
})
내보내기 클래스 IllustrationsComponent는 OnInit를 구현합니다.
작업자: 모두 = [

'노동자 1',

'노동자 2',

'노동자 3',

'노동자 4',

'노동자 5',

]

생성자() { }

ngOnInit(): 무효 {
}

}

*ngSwitch 지시문을 사용하는 방법

번역자 추가: 이 명령은 실제 ​​개발에 매우 ​​유용합니다.

우리는 ngSwitch 사용하여 다양한 조건문을 기반으로 렌더링할 요소를 결정합니다. *ngSwitch 지시문은 우리가 사용하는 switch 문과 매우 유사합니다. 예를 들어:

 <div [ngSwitch]="내쇼핑">
<p *ngSwitchCase="'cups'">컵</p>
<p *ngSwitchCase="'veg'">야채</p>
<p *ngSwitchCase="'clothes'">바지</p>
<p *ngSwitchDefault>내 쇼핑</p>
</div>

typescript 에서 :

 마이쇼핑: 문자열 = '';

기본값이 있고 조건을 충족하는 모듈의 특정 요소를 렌더링하는 데 사용되는 MyShopping 변수가 있습니다.

조건 값이 true 이면 관련 요소가 DOM 으로 렌더링되고 나머지 요소는 무시됩니다. 일치하는 요소가 없으면 *ngSwitchDefault 요소가 DOM 으로 렌더링됩니다.

Angular에서 구조적 지시문을 언제 사용해야 합니까?

DOM 에서 요소를 추가하거나 제거하려면 구조 지시어를 사용해야 합니다. 물론 이를 사용하여 요소 CSS 스타일을 변경하거나 이벤트 리스너를 추가할 수도 있습니다. 이를 사용하여 이전에 존재하지 않았던 새로운 요소를 만들 수도 있습니다.

가장 좋은 규칙은 DOM 조작을 고려할 때 구조적 지시어를 사용해야 한다는 것 입니다.

요약

구조적 지시문은 Angular 의 중요한 부분이며 다양한 방법으로 사용할 수 있습니다.

이 기사를 통해 독자들이 이러한 지침을 사용하는 방법과 이러한 모드를 언제 사용하는지 더 잘 이해할 수 있기를 바랍니다.

관련 기사