Angular에서 사용자 지정 지시문을 만드는 방법

구조 지시문을 사용하면 페이지의 모든 요소를 ​​추가, 변경 또는 제거하는 등 다양한 방식으로 DOM을 변경할 수 있습니다. HTML 요소에 속성으로 추가됩니다. 디렉티브는 구분하기 쉽도록 항상 * 접두사를 붙여야 합니다. Angular는 ngIf, ngFor 등과 같은 몇 가지 기본 제공 지시문을 제공합니다.

💡 별표(*)는 이 지시문을 ng-템플릿에 첨부하는 HTML의 후드 아래를 감싸는 구문 설탕입니다.

첫 번째 디렉티브를 만들어 봅시다

일정 시간이 지나면 일부 콘텐츠를 표시하는 지시문을 만들 것입니다.

먼저 Angular CLI에서 이 명령을 실행하여 디렉티브 클래스를 생성해야 합니다.

/* ng generate directive name-of-directive */
ng generate directive showContentAfterDelay

생성된 지시문 클래스에 다음 코드를 추가합니다.

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ozarksShowContent]'
})
export class ShowContentDirective implements OnInit {

  @Input('ozarksShowContent') delay = 0

  constructor(private viewContainerRef: ViewContainerRef,
              private  template: TemplateRef<any>) 
              { }

  ngOnInit(): void {
      this.viewContainerRef.createEmbeddedView(this.template);
      setTimeout(() => {
        // cleans up the view cointainer ref
        this.viewContainerRef.clear();
      }, this.delay)  
  }
} 

디렉티브는 @Directive 데코레이터의 기능을 제공합니다. 여기에서 해당 속성 선택기를 ozarksShowContent에 제공하여 애플리케이션의 어느 곳에서나 이 선택기를 사용할 수 있습니다.

@Input() 데코레이터를 사용하여 지시문에 데이터를 전달합니다. 이는 부모 구성 요소(Parent)가 자식 구성 요소에 전달하는 속성입니다.

생성자에 ViewCointainerRef 및 TemplateRef를 주입합니다. ViewContainerRef는 하나 이상의 뷰를 연결할 수 있는 컨테이너를 나타내며 TemplateRef는 구성 요소/지시문에서 ng-템플릿을 참조하는 방법입니다.

템플릿에서 다음과 같이 사용자 지정 지시문을 추가합니다.

<h1>Welcome to the Lazy-O Motel</h1>
<section *ozarksShowContent="5000">
  <h1>Let Me See You!</h1></section>

이렇게 템플릿에 입력 값을 바인딩하려고 하면 Angular가 존재하지 않는 섹션의 속성으로 입력을 해결하려고 하기 때문에 작동하지 않습니다.

<!--This will not work-->

<h1>Welcome to the Lazy-O Motel</h1>
<section *ozarksShowContent [delay]="5000">
  <h1>Let Me See You!</h1> 
</section>

5초 후에 콘텐츠를 렌더링하려는 경우 구현 방법은 다음과 같습니다.

.ts 파일에서

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ozarksShowContent]'
})
export class ShowContentDirective implements OnInit {

  @Input('ozarksShowContent') delay = 0

  // showing content after some time
  @Input("ozarksShowContentThen") placeholder: TemplateRef<any> = null;

  constructor(private viewContainerRef: ViewContainerRef,
              private  template: TemplateRef<any>) 
              { }

  ngOnInit(): void {
      this.viewContainerRef.createEmbeddedView(this.template);
      setTimeout(() => {
        // cleans up the view cointainer ref
        this.viewContainerRef.clear();
        if(this.placeholder){
          // if the value is true,show the template
          this.viewContainerRef.createEmbeddedView(this.placeholder )
        }
      }, this.delay)

  }
}

.html 파일에서

<section *ozarksShowContent="5000; then placeholder">
  <h1>Let Me See You!</h1> 
</section>

<ng-template #placeholder>
  <mat-toolbar color="primary">
    <mat-icon>hotel</mat-icon> &nbsp; &nbsp;
    <span>Welcome to the Lazy-O Motel </span>
  </mat-toolbar>
</ng-template>

결론

사용자 지정 지시문은 사용자 지정 논리가 DOM 요소에 관련될 때 유용할 수 있습니다. 예를 들어 사용자 역할 관리에서 웹 애플리케이션에 프리미엄 고객, 무료 요금제 고객 등이 있다고 가정할 때 다른 고객에게 일부 측면을 보여주고 싶을 수 있습니다. 내장 지시문이 필요한 출력을 제공하지 않는 경우 언제든지 사용자 지정 지시문을 작성할 수 있습니다.

행복한 학습!