Angular: otra forma de darse de baja

Las suscripciones en el código del componente deben evitarse cambiando esta tarea a AsyncPipe, sin embargo, esto no siempre es posible. Hay diferentes formas de finalizar las suscripciones, pero todas se reducen a dos: cancelar la suscripción manual o usar takeUntil.

Con el tiempo, comencé a usar mi decorador para cancelar la suscripción. Consideremos cómo está organizado y aplicado, tal vez le gustará este método.

La idea básica es que cualquier suscripción debe devolverse de un método. Aquellos. Todas las suscripciones se realizan en un método decorado separado y tiene la siguiente firma.

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

El mecanografiado le permite colgar un decorador en un método que puede modificar el método y su resultado.

Se requerirán tres operaciones.

1. Al llamar a ngOnInit, se debe crear algún tipo de repositorio de suscripción.
2. Al llamar a un método decorado que devuelve una suscripción, esta suscripción debe almacenarse en el repositorio.
3. Cuando se llama a ngOnDestroy, todas las suscripciones del repositorio deben completarse (darse de baja).

Déjame recordarte cómo se hace un decorador de método de clase. La documentación oficial está aquí.

Aquí está la firma del decorador:

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

El decorador recibe el constructor de la clase, el nombre de la propiedad y un descriptor como entrada. Ignoraré el descriptor, no desempeña ningún papel para esta tarea, casi nadie modificará el descriptor del método.

, , - , , .

,

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 .

.

Enlace Stackblitz
para Angular 9 en GitHub

Decorator se puede tomar en npm como un paquete de ngx-until-on-destroy
fuentes de Decorator en Github