हम कोणीय में घटनाओं के साथ काम पंप करते हैं

एक बार, मैंने एंगुलर में EventManager के साथ काम करने के बारे में एक लेख लिखा । इसमें, मैंने इस बारे में बात की कि कैसे आप ईवेंट सदस्यता के लिए सामान्य वाक्यविन्यास को बचा सकते हैं, जबकि अक्सर और संवेदनशील घटनाओं पर परिवर्तनों की जाँच के अनावश्यक ट्रिगर से बचते हैं।

हालाँकि, मैंने जिस विधि का वर्णन किया है वह बोझिल और समझने में कठिन है। यह सज्जाकारों पर फ़िल्टरिंग को फिर से लिखने का समय है।

संक्षिप्त रिप्ले

उन लोगों के लिए जो पिछले लेख को नहीं पढ़ना चाहते हैं, समस्या का सारांश:

1. कोणीय टेम्पलेट ( (eventName)) और सज्जाकारों के माध्यम से ( ) में घटनाओं की घोषणा करने की अनुमति देता है @HostListener(‘eventName’)।
2. एक परिवर्तन सत्यापन रणनीति के साथ, OnPushयदि कोई घटना घटती है, तो एंगुलर एक मान्यता चलाएगा।
3. जैसे घटनाक्रम scroll, mousemove, dragबहुत बार शुरू हो गया। व्यवहार में, आपको केवल उनमें से कुछ का जवाब देना होगा (उदाहरण के लिए, जब उपयोगकर्ता ने कंटेनर को अंत तक स्क्रॉल किया था - नए तत्व लोड करें)।
4. EventManagerप्रदान किए गए EventManagerPluginएस का उपयोग करके कोणीय घटना प्रसंस्करण को संभालता है ।
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, .