Nous pompons le travail avec des événements dans Angular

Il était une fois, j'ai écrit un article sur le travail avec EventManager dans Angular . Dans ce document, j'ai expliqué comment vous pouvez enregistrer la syntaxe habituelle pour les abonnements aux événements, tout en évitant les déclencheurs inutiles de vérification des modifications sur les événements fréquents et sensibles.

Cependant, la méthode que j'ai décrite est lourde et difficile à comprendre. Il est temps de réécrire le filtrage sur les décorateurs.

Relecture brève

Pour ceux qui n'ont pas lu et ne veulent pas lire l'article précédent, un résumé du problème:

1. Angular permet de souscrire de manière déclarative aux événements dans le modèle ( (eventName)) et via les décorateurs ( @HostListener(‘eventName’)).
2. Avec une stratégie de validation des changements, OnPushAngular exécutera une validation si un événement se produit auquel nous nous sommes abonnés de cette manière.
3. Des événements tels que scroll, mousemove, dragdéclenchées très souvent. Dans la pratique, il vous suffit de répondre à certains d'entre eux (par exemple, lorsque l'utilisateur fait défiler le conteneur jusqu'au chargement final de nouveaux éléments).
4. Angular gère le traitement des événements en EventManagerutilisant le EventManagerPlugins.
5. Angular , .

. . .

Angular (keydown.ctrl.enter ).

, EventManager. . Angular , EVENT_MANAGER_PLUGINS . , , . addEventListener , , , , , . .

preventDefault stopPropagation. , , , :

@Injectable()
export class StopEventPlugin {
  supports(event: string): boolean {
    return event.split('.').includes('stop');
  }

  addEventListener(
    element: HTMLElement, 
    event: string, 
    handler: Function
  ): Function {
    const wrapped = (event: Event) => {
      event.stopPropagation();
      handler(event);
    };

    return this.manager.addEventListener(
      element,
      event
        .split('.')
        .filter(v => v !== 'stop')
        .join('.'),
      wrapped,
    );
  }
}

. , :

1. Angular, .
2. .
3. .

, NgZone :

@Injectable()
export class SilentEventPlugin {
  supports(event: string): boolean {
    return event.split('.').includes('silent');
  }

  addEventListener(
    element: HTMLElement,
    event: string,
    handler: Function
  ): Function {
    return this.manager.getZone().runOutsideAngular(() =>
      this.manager.addEventListener(
        element,
        event
          .split('.')
          .filter(v => v !== 'silent')
          .join('.'),
        handler,
      ),
    );
  }
}

, .

, -. /, this.

, , . — - , , . $event @HostListener. :

export function shouldCall<T>(
  predicate: Predicate<T>
): MethodDecorator {
  return (_target, _key, desc: PropertyDescriptor) => {
    const {value} = desc;

    desc.value = function(this: T, ...args: any[]) {
      if (predicate.apply(this, args)) {
        value.apply(this, args);
      }
    };
  };
}

. — - Angular, .

Angular 10 Ivy , markDirty(this). , - NgZone. . , . , NgZone , :

@Injectable()
export class ZoneEventPlugin {
  supports(event: string): boolean {
    return event.split('.').includes('init');
  }

  addEventListener(
    _element: HTMLElement,
    _event: string, 
    handler: Function
  ): Function {
    const zone = this.manager.getZone();
    const subscription = zone.onStable.subscribe(() => {
      subscription.unsubscribe();
      handler(zone);
    });

    return () => {};
  }
}

— .init , ( , ). @HostListener(‘prop.init’, [‘$event’]) :

export function shouldCall<T>(
  predicate: Predicate<T>
): MethodDecorator {
  return (_, key, desc: PropertyDescriptor) => {
    const {value} = desc;

    desc.value = function() {
      const zone = arguments[0] as NgZone;

      Object.defineProperty(this, key, {
        value(this: T, ...args: any[]) {
          if (predicate.apply(this, args)) {
            zone.run(() => {
              value.apply(this, args);
            });
          }
        },
      });
    };
  };
}

, . , . Ivy.

, , :
https://stackblitz.com/edit/angular-event-filter-decorator

, , , . , , . async Observable :

<p *ngFor="let item of service.items$ | async">{{item}}</p>

, :

export function scrolledToBottom(
   {scrollTop, scrollHeight, clientHeight}: HTMLElement
): boolean {
  return scrollTop >= scrollHeight - clientHeight - 20;
}

@Component({
  selector: 'awesome-component',
  templateUrl: './awesome-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AwesomeComponent {
  constructor(@Inject(Service) readonly service: Service) {}

  @HostListener('scroll.silent', ['$event.currentTarget'])
  @HostListener('init.onScroll', ['$event'])
  @shouldCall(scrolledToBottom)
  onScroll() {
    this.service.loadMore();
  }
}

. :
https://stackblitz.com/edit/angular-event-filters-scroll

, . CustomEvent, . .

(1 gzip) open-source- @tinkoff/ng-event-filters. Angular 10 2.0.0, markDirty(this), Angular 4.

npm-

-, open source, ? Angular Open-source Library Starter, . CI, , , CHANGELOG, .