Herencia con inject()

El concepto de clases y herencias también es aplicable en Angular, pues Angular esta basado en clases. Por lo tanto es posible extender componentes. Este proceso puede volverse complicado especialmente cuando se usa la inyección de dependencias. Veamos este ejemplo:

Sin inject()

// Clase
export class CustomClass {
  constructor(private router: Router) {}
}
 
// Componente
export class SomeComponent extends CustomClass {
  constructor(
    // Debemos inyectar todas las dependencias de
    // CustomClass nuevamente
    private router: Router,
    private http: HttpClient
  ) {
    super(router); // Y también pasar el parámetro
  }
}

El problema consta en que por cada vez que se extiende un componente habría que manualmente inyectar las dependencias en cada constructor, volviéndose una tarea repetitiva especialmente cuando la cadena de herencia es muy larga.

Con inject()

Con inject() podemos omitir los constructores y simplemente hacer uso de esta función para obtener las dependencias sin tener que preocuparnos de pasarlas al constructor principal.

// Componente Padre
export class PadreClass {
  private router = inject(Router);
}
 
// Componente Hijo
export class HijoComponent extends PadreClass {
  private http = inject(HttpClient);
}

De esta forma nos quedan componentes mucho más limpios y sin necesidad de tener que importar la dependencia cada vez.

Conclusión

En definitiva, la función inject() se vuelve una herramienta útil para simplificar la inyección de dependencias en componentes y directivas de Angular que extienden de otras clases ahorrándonos tiempo y brindando facilidad en tareas como la herencia, dejando un código más limpio y fácil de mantener.