Carlos Cifuentes
Referencia AngularJS → Angular

$scope.$on('$destroy') en Angular moderno

La limpieza en $destroy pasa a ser DestroyRef.onDestroy para callbacks arbitrarios y takeUntilDestroyed para suscripciones de RxJS.

Antes · AngularJS
app.controller('LiveCtrl', function ($scope, $rootScope, $interval, Socket) {
  var timer = $interval(refresh, 5000);
  var off = $rootScope.$on('cart:updated', refresh);
  Socket.on('price', onPrice);

  $scope.$on('$destroy', function () {
    $interval.cancel(timer);
    off();
    Socket.off('price', onPrice);
  });
});
Después · Angular
export class LiveComponent {
  private store = inject(CartStore);
  private socket = inject(SocketService);
  price = signal<Price | null>(null);

  constructor() {
    interval(5000)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.store.refresh());

    const onPrice = (p: Price) => this.price.set(p);
    this.socket.on('price', onPrice);
    inject(DestroyRef).onDestroy(() => this.socket.off('price', onPrice));
  }
}

Qué cambia

  • takeUntilDestroyed() sin argumentos solo funciona en un contexto de inyección, como el constructor; en cualquier otro lugar, pásale un DestroyRef.
  • DestroyRef.onDestroy registra un callback de limpieza justo al lado del código que lo necesita.
  • Los eventos del template, el pipe async, toSignal y effect se limpian solos cuando se destruye el componente.

Consejo de migración. Busca en el código viejo los $rootScope.$on, $interval y listeners de sockets que no tienen su limpieza correspondiente. Hoy son fugas de memoria, así que corrígelas durante el traslado en vez de portarlas.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn