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

데코레이터란 무엇입니까? Angular에서 메소드 데코레이터를 사용하는 방법에 대해 이야기해 볼까요?

저자：Eve Cole 업데이트 시간：2022-06-28 09:23:00
데코레이터란 무엇입니까? 이번 글은 Angular에서 메소드 데코레이터를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

메소드 데코레이터는 Angular의 독점적인 기능이 아닙니다. 이 기사에서는 주로 Angular의 메소드 데코레이터 사용을 소개합니다. [관련 튜토리얼 추천: "Angular 튜토리얼"]

es6에서

데코레이터

(Decorator)는 클래스(클래스)에 관련된 구문으로, 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용됩니다. 컴파일하는 동안 "@function name" 구문은 일반적으로 클래스 및 클래스 메서드 정의 앞에 배치됩니다. 데코레이터에는 클래스 데코레이터와 클래스 메서드 데코레이터라는 두 가지 유형이 있습니다.

Angular에서 가장 일반적인 데코레이터는 @Component 클래스 데코레이터이며 메서드에 데코레이터를 추가할 수도 있습니다.

1.png

데코레이터는 함수입니다. 메소드 데코레이터는 메소드 정의를 모니터링, 수정 또는 대체하는 데 사용할 수 있습니다

. 메소드 데코레이터를

사용하면

메소드 정의를 모니터링, 수정 또는 대체할 수 있습니다. 이러한 방식으로 우리는 이 캡슐화 계층을 유연하게 사용하여 많은 작업을 수행할 수 있습니다.

가장 일반적인 것은 검증입니다. 이 레이어를 통해 메소드를 캡슐화하여 통합 권한 확인을 수행할 수 있습니다. 이런 방식으로 메소드에 권한 확인을 추가해야 하는 경우 반복 대신 이 메소드 데코레이터를 추가하면 됩니다. 확인 방법.

또는 통일된 팝업 창이나 프롬프트 처리일 수도 있습니다. 다양한 메소드의 경우 실행 후에 통일된 프롬프트 처리가 수행될 수 있으므로 통일된 처리를 위해 메소드 데코레이터를 추가할 수 있습니다.

전체적으로 메소드 데코레이터의 목적은 각 메소드 호출 중에 필요할 때 재사용할 수 있도록 일부 메소드의 통합 논리를 캡슐화하는 것입니다.

메소드 데코레이터 사용

방법

데코레이터에는 주로 세 가지 입력 매개변수가 있습니다.

  • target: Object - 데코레이팅된 클래스의 객체
  • 키: 문자열 - 메소드 이름
  • 설명자: TypePropertyDescript - 속성 설명자
import { Component, OnInit } from '@angular/core';

function log(대상: 임의, 키: 문자열, 설명자: 임의) {
  console.log(대상);
  console.log(키);
  console.log(설명자);
}
@요소({
  선택기: 'app-fn-test',
  templateUrl: './fn-test.comComponent.html',
  styleUrls: ['./fn-test.comComponent.scss']
})
내보내기 클래스 FnTestComponent는 OnInit {를 구현합니다.

  생성자() { }

  ngOnInit(): 무효 {
    this.pay(2,3)
  }
  
  @통나무
  pay(Price: number, count:number): 숫자 {
      반품 가격*개수
  }
}

2.png

그리고 메소드 데코레이션은 두 가지 유형으로 나눌 수 있습니다. 하나는 매개변수를 전달하는 메소드 데코레이터이고, 다른 하나는 매개변수를 전달하지 않는 메소드 데코레이터입니다.

데코레이팅된 메소드인

매개변수를 전달하지 않고

속성 설명자에 descriptor.value 속성이 있습니다

. 이 메소드를 통해 전달된 매개변수와 함수의 실행 결과를 얻을 수 있습니다.

function log(target: any, key: 문자열, 설명자: 모두) {
  let 메소드 = descriptor.value;
  descriptor.value = 함수 (...args: any[]) {
      var 결과: any = method.apply(this, args);
      console.log(`메서드：${key}, args：${JSON.stringify(args)}, return：${result}`);
      결과 반환;
  }
}

들어오는 매개변수

매개변수를 전달하는 경우 이전 함수 외부에 다른 레이어를 래핑해야 합니다. 외부 함수는 전달된 값을 얻을 수 있으며 내부 레이어에서 반환되는 함수는 매개변수가 없는 이전 함수와 동일합니다. 이 함수를 사용하려면 세 가지 매개변수를 얻을 수 있습니다.

function log(nowTime: Date) {
  console.log(nowTime);
  반환 함수(대상: 임의, 키: 문자열, 설명자: 임의){
    let 메소드 = descriptor.value;
    descriptor.value = 함수 (...args: any[]) {
        var 결과: any = method.apply(this, args);
        console.log(`메서드：${key}, args：${JSON.stringify(args)}, return：${result}`);
        결과 반환;
    }
  }
}

내보내기 클래스 FnTestComponent는 OnInit {를 구현합니다.

  ...    
  @log(새 날짜())
  pay(Price: number, count:number): 숫자 { return Price*count
  }
}

// 2022년 6월 7일 화요일 18:48:22 GMT+0800(중국 표준시)
// fn-test.comComponent.ts:9 method: pay, args: [2,3], return: 6

요약

메서드 데코레이터를 통해 클래스 내부 메서드에 대해 통일된 논리적 처리를 수행할 수 있어 불필요한 작업을 많이 줄일 수 있습니다. 코드 중복으로 인해 방법이 더 간단해지고 후속 2차 개발 비용도 크게 절감될 수 있습니다.
관련 기사