$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 · Angularexport 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
- require (parent controllers)
- isolate scope (scope: {})
- $attrs.$observe
- $onInit / $onChanges / $onDestroy / $postLink
¿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