Comment fonctionne le décorateur de méthode angulaire?

Question

Dans ce Angular decorator tutorial, le tutoriel explique qu'un throttle décorateur (lodash throttle fonction) peut être ainsi:

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

Et utiliser dans la classe suivante

@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'); 
    } 
} 

Je me demande comment fonctionne l'accélérateur à changer la fonction de défilement. Quelqu'un pourrait-il expliquer ou me faire savoir comment je peux voir le code compilé? Merci!

Answer 1

throttle est un décorateur de propriété et cela signifie que son travail est généralement de modifier la classe (objet) property descriptor. Le descripteur avant la modification a value pointant vers scroll fonction:

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

Le décorateur accepte ce descripteur et remplace le value original avec la nouvelle fonction décorée retournée par l'appel à 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; 
}; 

Si le décorateur renvoie le descripteur qu'il utilise pour définir la propriété au lieu du descripteur d'origine.

Vous pouvez en savoir plus sur les décorateurs dans l'article:

• Implementing custom component decorator in Angular