Uso de funciones de inyección de dependencia en lugar de constructores

Reeditado por Platón

seguidores: 0

Introducción

A partir de Angular 14, podemos usar la nueva función de inyección en componentes, directivas y tuberías. Hay varios beneficios en el uso de este enfoque, ya que mejora significativamente la legibilidad y la reutilización de nuestro código.

Por ejemplo, en lugar de:

export class MyComponent { constructor(private apiService: APIService) {}
}

simplemente podemos escribir:

export class MyComponent { private apiService = inject(APIService);
}

Este enfoque es realmente útil para componentes con una gran cantidad de dependencias, ya que es mucho más legible pasar dependencias en la definición de nuestra clase, en lugar de en el constructor.

Entonces, podemos cambiar el código como este:

export class MyComponent { constructor( private apiService: APIService, private router: Router, private activatedRoute: ActivatedRoute ) {}
}

a esto:

export class MyComponent { private apiService = inject(APIService); private router = inject(Router); private activatedRoute = inject(ActivatedRoute);
}

Funciones reutilizables

Uno de los principales beneficios de usar la función de inyección es la capacidad de crear funciones modulares y reutilizables.

Un ejemplo de esto es el código requerido para darse de baja de los observables cuando se destruye el componente.

En lugar de escribir código como este:

export class MyComponent { private destroy$ = new Subject(); ngOnInit() { this.apiService.getData().pipe( takeUntil(this.destroy$) ).subscribe(data => console.log(data)); } ngOnDestroy(): void { this.destroy$.next(true); this.destroy$.complete(); }
}

simplemente podemos escribir:

export class MyComponent { private destroy$ = untilDestroyed(); ngOnInit() { this.apiService.getData().pipe( takeUntil(this.destroy$) ).subscribe(data => console.log(data)); }
}

En lugar de repetir la lógica para darse de baja en cada componente, simplemente podemos crear una función reutilizable para manejar la lógica de darse de baja:

export function untilDestroyed() { const subject = new Subject<void>(); const viewRef = inject(ChangeDetectorRef) as ViewRef; viewRef.onDestroy(() => { subject.next(); subject.complete() }); return takeUntil(subject.asObservable());
}

Algunos otros casos de uso incluyen escribir lógica para recuperar un parámetro de consulta específico.

Entonces, en lugar de escribir:

export class MyComponent { id$ = this.activatedRoute.queryParams.pipe( map(params => params.id) ); constructor(private activatedRoute: ActivatedRoute) {}
}

simplemente podemos reescribir nuestro componente como:

export class MyComponent { id$ = getParam$('id');
}

La lógica para determinar el parámetro de consulta actual se puede reescribir como una función común:

export function getParam$(key: string) { const activatedRoute = inject(ActivatedRoute); return activatedRoute.queryParams.pipe( map(params => params[key]) );
}

Esto puede evitar tener que duplicar la lógica en varios componentes.