Question

在这个Angular decorator tutorial中，教程解释了throttle装饰器（lodash throttle功能）可以这样做：

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是一个属性装饰器，它意味着它的工作通常是修改类（对象）property descriptor。修改前的描述符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;
};

如果装饰器返回描述符，则用于定义属性而不是原始描述符。

您可以在文章中阅读有关装饰器的更多信息：

Implementing custom component decorator in Angular

角度方法装饰器如何工作？

1 个答案: