कोणीय: सदस्यता समाप्त करने का दूसरा तरीका

घटक कोड में सदस्यता इस कार्य को AsyncPipe में स्थानांतरित करने से बचा जाना चाहिए, हालांकि यह हमेशा संभव नहीं है। सदस्यता समाप्त करने के अलग-अलग तरीके हैं, लेकिन वे सभी दो से नीचे आते हैं - मैनुअल अनसबस्क्राइब या टेक यूटिल का उपयोग करना।

समय के साथ, मैंने तेजी से सदस्यता समाप्त करने के लिए अपने डेकोरेटर का उपयोग करना शुरू कर दिया। आइए विचार करें कि यह कैसे व्यवस्थित और लागू किया जाता है, शायद आपको यह तरीका पसंद आएगा।

मूल विचार यह है कि किसी भी सदस्यता को एक विधि से वापस किया जाना चाहिए। उन। सभी सदस्यताएँ एक अलग सजी हुई विधि में होती हैं और इसमें निम्नलिखित हस्ताक्षर होते हैं।

(...args: any[]) => Subscription;

टाइपस्क्रिप्ट आपको एक विधि पर एक डेकोरेटर लटकाने की अनुमति देता है जो विधि और उसके परिणाम को संशोधित कर सकता है।

तीन ऑपरेशन की आवश्यकता होगी।

1. NgOnInit पर कॉल करते समय, किसी प्रकार की सदस्यता रिपॉजिटरी बनाई जानी चाहिए।
2. किसी सदस्यता को लौटाने वाली सजाए गए तरीके को कॉल करते समय, इस सदस्यता को भंडार में संग्रहीत किया जाना चाहिए।
3. जब ngOnDestroy कहा जाता है, तो रिपॉजिटरी से सभी सदस्यताएं पूरी होनी चाहिए (सदस्यता समाप्त)।

मुझे याद दिलाएं कि क्लास विधि डेकोरेटर कैसे बनाया जाता है। आधिकारिक प्रलेखन यहाँ है

यहाँ डेकोरेटर हस्ताक्षर है:

<T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void; 

डेकोरेटर को क्लास कंस्ट्रक्टर, प्रॉपर्टी का नाम और इनपुट के रूप में डिस्क्रिप्टर मिलता है। मैं डिस्क्रिप्टर की उपेक्षा करूंगा, यह इस कार्य के लिए कोई भूमिका नहीं निभाता है, शायद ही कोई विधि डिस्क्रिप्टर को संशोधित करेगा।

, , - , , .

,

export function UntilOnDestroy<ClassType extends DirectiveWithSubscription>(): MethodDecorator {
  return function UntilOnDestroyDecorator(target: ClassType, propertyKey: string): TypedPropertyDescriptor<SubscriptionMethod> {
    wrapHooks(target);
    return {
      value: createMethodWrapper(target, target[propertyKey]),
    };
  } as MethodDecorator;
}

, , , — - , , createMethodWrapper.

, .1 . 3 (Subscription). add, unsubscribe .

Subscription

-, .

const subSymbol = Symbol('until-on-destroy');

interface ClassWithSubscription {
  [subSymbol]?: Subscription;
}

, .

createMethodWrapper

2.

function createMethodWrapper(target: ClassWithSubscription, originalMethod: SubscriptionMethod): SubscriptionMethod {
  return function(...args: any[]) {
    const sub: Subscription = originalMethod.apply(this, args);
    target[subSymbol].add(sub);
    return sub;
  };
}

createMethodWrapper , , () . subSymbol, , .

wrapHooks

1 3.

function wrapHooks(target: ClassWithSubscription) {
  if (!target.hasOwnProperty(subSymbol)) {
    target[subSymbol] = null;
    wrapOneHook(target, 'OnInit', t => t[subSymbol] = new Subscription());
    wrapOneHook(target, 'OnDestroy', t => t[subSymbol].unsubscribe());
  }
}

, , subSymbol.

. , , .

. , Angular 9 , . ViewEngine Ivy

const cmpKey = 'ɵcmp';

function wrapOneHook(target: any, hookName: string, wrappingFn: (target: ClassWithSubscription) => void): void {
  return target.constructor[cmpKey]
    ? wrapOneHook__Ivy(target, hookName, wrappingFn)
    : wrapOneHook__ViewEngine(target, hookName, wrappingFn);
}

'ɵcmp' , Ivy . Ivy .

ViewEngine

function wrapOneHook__ViewEngine(target: any, hookName: string, wrappingFn: (target: ClassWithSubscription) => void): void {
  const veHookName = 'ng' + hookName;
  if (!target[veHookName]) {
    throw new Error(`You have to implements ${veHookName} in component ${target.constructor.name}`);
  }
  const originalHook: () => void = target[veHookName];
  target[veHookName] = function (): void {
    wrappingFn(target);
    originalHook.call(this);
  };
}

, ( ), .

wrappingFn.

Ivy , Ivy. , .

ngOnInit ngOnDestroy.

function wrapOneHook__Ivy(target: any, hookName: string, wrappingFn: (target: ClassWithSubscription) => void): void {
  const ivyHookName = hookName.slice(0, 1).toLowerCase() + hookName.slice(1);
  const componentDef: any = target.constructor[cmpKey];

  const originalHook: () => void = componentDef[ivyHookName];
  componentDef[ivyHookName] = function (): void {
    wrappingFn(target);

    if (originalHook) {
      originalHook.call(this);
    }
  };
}

, , componentDef.

, , OnInit ngOnInit, onInit.

, .

ng new check

ng g c child

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <button #b (click)="b.toggle = !b.toggle">toggle</button>
    <app-child *ngIf="b.toggle"></app-child>
  `,
})
export class AppComponent {}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<p>child: {{id}}</p>`,
})
export class ChildComponent implements OnInit {
  id: string;

  ngOnInit() {
    this.id = Math.random().toString().slice(-3);
    this.sub1();
    this.sub2();
  }

  @UntilOnDestroy()
  sub1(): Subscription {
    console.log(this.id, 'sub1 subscribe');
    return NEVER.pipe(
      finalize(() => console.log(this.id, 'sub1 unsubscribe'))
    )
      .subscribe();
  }

  sub2(): Subscription {
    console.log(this.id, 'sub2 subscribe');
    return NEVER.pipe(
      finalize(() => console.log(this.id, 'sub2 unsubscribe'))
    )
      .subscribe();
  }
}

toggle app-child :

… :

sub1 , sub2 .

.

GitHub पर कोणीय 9 के लिए स्टैकब्लिट्ज़ लिंक

डेकोरेटर एक पैकेज के रूप में NPM में लिया जा सकता है ngx-until-on-destroy
पर डेकोरेटर सूत्रों Github