Angular의 지시문

독자 여러분, 안녕하세요 👋 지령을 소개하는 시리즈의 세 번째 파트에 오신 것을 환영합니다!

지난 두 기사에서는 구성 요소 및 데이터 바인딩에 대해 이야기했습니다. 나와 같은 초보자라면 먼저 살펴보고 이 기사로 넘어갈 수 있습니다.

지침이란 무엇입니까?

지시문은 Angular 애플리케이션의 요소에 추가 동작을 추가하는 클래스입니다. Angular에서 DOM 요소를 생성하고 구조 또는 동작을 변경합니다.
신청.

세 가지 유형의 지시문이 있습니다.

구성 요소 - 가장 일반적인 지시문 유형이며 템플릿과 함께 사용됩니다

.

특성 지시어 - 요소, 구성 요소 또는 다른 지시어의 모양이나 동작을 변경합니다

.

구조 지시문 - DOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경합니다

.

자세한 내용은

구성 요소 지시문과 속성 및 구조 지시문의 주요 차이점은 구성 요소 지시문에는 템플릿이 있지만 다른 지시문에는 템플릿이 없다는 것입니다.

내장 구조 지시문 - *ngIf, *ngFor

내장 속성 지시문 - NgStyle, NgModel, NgClass

속성 지시어

특성 지시문은 다른 HTML 요소, 특성, 속성 및 구성 요소의 동작을 수신하고 수정합니다.

가장 일반적인 속성 지시어의 세부사항:

NgClass- CSS 클래스 집합을 추가 및 제거합니다.

NgStyle- HTML 스타일 세트를 추가 및 제거합니다.

NgModel - 양방향 데이터 바인딩을 HTML 양식 요소에 추가합니다.

사용자 지정 지시문 생성의 예:

import { Directive, ElementRef, Renderer } from ‘@
angular/core’;
@Directive({
selector: ‘[appChbgcolor]’
})
export class ChangeBgColorDirective {
constructor(private el: ElementRef, private renderer:
Renderer) {
this.ChangeBgColor(‘red’);
}
ChangeBgColor(color: string) {
this.renderer.setElementStyle(this.l.nativeEleme
nt,‘color’, color);
}
}

사용자 지정 속성 지시문을 만들려면 클래스를 만들고 @Directive로 데코레이션해야 합니다.
디렉티브 클래스의 생성자에서 ElementRef 및 Renderer 서비스를 주입합니다. 호스트 요소와 렌더러의 참조를 가져오려면 이 두 클래스의 인스턴스가 필요합니다.

구조 지시어

구조 지시문은 DOM 요소의 구조를 변경합니다. *ngIf는 실행될 'if' 조건문을 제공하는 구조적 지시어입니다. 조건이 False가 되면 요소가 DOM에서 제거됩니다. 조건이 True이면 요소가 DOM에 추가됩니다. 반면 *ngFor 구조 지시문은 루프에서 DOM 요소를 생성합니다.

*ngIf의 예:

@Component({
selector: ‘app-notification’,
template:`
<div *ngIf = ‘showNotif’>
Show Notification
</div>
`
})
export class AppNotificationComponent {
showNotif = true;
}

위의 예에서 조건이 true이므로 요소가 DOM에 추가됩니다.

결론

이 기사에서 지시문은 Angular의 필수 부분이며 작업에 따라 다양한 유형의 지시문을 사용할 수 있습니다.

끝까지 읽어주셔서 감사합니다. 즐거운 배움 🌻

질문이나 제안이 있으시면 아래 댓글에 남겨주시거나 저에게 연락해 주세요.