角方法装饰器是如何工作的

Question

在这个Angular装饰器教程中，该教程解释了可以通过以下方式制作节流装饰器(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是一个属性装饰器，这意味着它的工作通常是修改类(对象)属性描述符。修改前的描述符具有指向scroll函数的value：

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

装饰器接受这个描述符，并用调用t:返回的新装饰函数替换原来的value

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中实现自定义组件装饰器