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

Question

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

1

В этом уроке "Угловой декоратор" в учебнике объясняется, что декоратор дроссельной заслонки (функция дроссельной заслонки 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');
  }
}

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

Jun 20 окт. 2017, в 02:33

Источник

Теги:

angular

javascript

angular-decorator

1 ответ

Ещё вопросы

Max Wizard K · Accepted Answer · 2017-10-20T03-36-00.000Z

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;
};

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

Подробнее о декораторах вы можете прочитать в статье:

Внедрение декоративного декоратора компонентов в угловом

У всех функций есть дескриптор, верно?
все методы имеют дескрипторы, так как метод является свойством, указывающим на функцию