Using Dependency Injection Functions Instead Of Constructors

Újra kiadta Platón

Követő: 0

Bevezetés

Az Angular 14-től kezdve az új inject funkciót komponensekben, direktívákban és csövekben használhatjuk. Ennek a megközelítésnek számos előnye van, mivel jelentősen javítja kódunk olvashatóságát és újrafelhasználhatóságát.

Például:

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

csak írhatjuk:

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

Ez a megközelítés nagyon hasznos a nagyszámú függőséggel rendelkező komponensek esetében, mivel sokkal olvashatóbb a függőségek átadása osztályunk definíciójában, nem pedig a konstruktorban.

Tehát a kódot így módosíthatjuk:

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

ehhez:

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

Újrafelhasználható funkciók

Az injekciós funkció használatának egyik fő előnye az újrafelhasználható és moduláris funkciók létrehozásának lehetősége.

Példa erre a kód, amely a megfigyelhető adatokról való leiratkozáshoz szükséges, ha az összetevő megsemmisül.

Ahelyett, hogy ilyen kódot írna:

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(); }
}

egyszerűen leírhatjuk:

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

Ahelyett, hogy minden komponensben megismételnénk a leiratkozás logikáját, egyszerűen létrehozhatunk egy újrafelhasználható függvényt a leiratkozási logika kezelésére:

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

Néhány más használati eset magában foglalja a logika írását egy adott lekérdezési paraméter lekéréséhez.

Tehát ahelyett, hogy írnánk:

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

egyszerűen átírhatjuk a komponensünket a következőképpen:

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

Az aktuális lekérdezési paraméter meghatározására szolgáló logika ezután közös függvényként átírható:

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

Ezzel elkerülhető, hogy több összetevőben meg kelljen duplikálnia a logikát.