Как работает угловой метод декоратора?

Question

В этом уроке Angular Decorator, учебник объясняет, что дроссельная заслонка (функция дроссельной заслонки lodash) может быть сделана следующим образом:

import t from 'lodash.throttle';

export function throttle( milliseconds : number = 500 ) : MethodDecorator {
   return function ( target : any, propertyKey : string, descriptor : PropertyDescriptor ) {
   const original = descriptor.value;
   descriptor.value = t(original, milliseconds);
   return descriptor;
  };
}

И использовать в следующем классе

@Component({
  selector: 'app-posts-page',
  template: `
     <posts [posts]="posts$ | async"></posts>
  `
})
export class PostsPageComponent {
  constructor( private store : Store<any> ) {
    this.posts$ = store.select('posts');
  }

  @HostListener('document:scroll')
  @throttle()
  scroll() {
    console.log('scroll');
  }
}

Интересно, как работает дроссельная заслонка для изменения функции прокрутки. Может кто-нибудь объяснить или дать мне знать, как я могу увидеть скомпилированный код? Спасибо!

Answer 1

throttle является декоратором свойства, и это означает, что его работа заключается в изменении дескриптора свойства класса (объекта). Дескриптор до модификации имеет value указывая на scroll функция:

{
  value: scroll() { console.log('scroll'); },
  ...
}

Декоратор принимает этот дескриптор и заменяет оригинальный value с новой декорированной функцией, возвращаемой вызовом t:

function ( target : any, propertyKey : string, descriptor : PropertyDescriptor ) {
   // save original value 'scroll'
   const original = descriptor.value;
   // overwrite original value with the decorated function returned by `t`
   descriptor.value = t(original, milliseconds);
   return descriptor;
};

Если декоратор возвращает дескриптор, он затем используется для определения свойства вместо исходного дескриптора.

Вы можете прочитать больше о декораторах в статье:

• Реализация пользовательских компонентов декоратора в Angular