角方法裝飾器如何工作？

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