Composons avec l'injection

소개

Avec la dernière version d'Angular, l'injection devient encore plus puissante.

A partir de la version 14, l'injection n'est plus uniquement réservée aux constructors de classe, elle pourra s'utiliser hors du contexte d'injection.

Cette nouveauté ouvre bien des possibilités, notamment la possibilité de créer des composables.

코멘트 cela fonctionne ?
댓글 l'intégrer dans nos applications ?

La réponse à ces deux questions se trouve dans la nouvelle implémentation de la fonction inject.

quoi sert la fonction 주입 ?

La fonction inject permet d'injecter un "token", et par la même chance d'en obtenir la reférence, dans l'injecteur actif courant.

Dans les précédentes Versions d'Angular, cette fonction ne pouvait s'utiliser uniquement dans le contexte de l'injection.

export const MY_HTTP = new InjectionToken('MY_HTTP', {
  provideIn: 'root',
  useFactory() {
    return inject(HttpClient);
  }
})

@Injectable()
export class TodoService {
  http = inject(MY_HTTP);
}

그리고 유지 보수 ?

A partir de la version 14 d'Angular, cette fonction inject va pouvoir s'utiliser hors du contexte d'injection à condition que cette dernière soit utilisée au moment:

de la construction d'une classe

이니셜라이저를 un paramètre de cette même classe.

단순한 공정, cette fonction va pouvoir s'utiliser dans les composants, directives et pipes.

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: './todo.component.less'
})
export class TodoComponent {
  todos$ = inject(TodoService).getTodos();
}

라 구성

Avec cette nouvelle manière de faire, écrire des fonctions à fortes réutilisabilités devient très facile.

Pour les développeurs Vue, cette nouveauté peut s'appparenter à la 구성.

// params.helper.ts
export function getParam<T>(key: string): Observable<T> {
  const route = inject(ActivatedRoute);
  return route.paramMap.pipe(
    map(params => params.get(key)),
    distinctUntilChanged()
  );
}

// todo-details.component.ts
@Component({
  selector: 'app-todo-details',
  templateUrl: './todo-details.component.html',
  styleUrls: './todo-details.component.less'
})
export class TodoComponent {
  todoId$ = getParam<Todo>('id');
  todo$ = todoId$.pipe(
    switchMap(id => inject(TodoService).getTodo(id))
  );
}

Un autre cas d'utilisation très pratique est la destroy des observables quand le composant est détruit.

réaliser notre logique de destruction을 따르십시오. Angular nous 제안 le hook OnDestroy 현재 dans le ViewRef.

Il devient dès lors très facile d'écrire une logique générique de destroy d'observables.

// clean-observable.helper.ts
export function untilDestroyed() {
  const subject = new Subject<void>();

  const viewRef = inject(ChangeDetectorRef) as ViewRef;

  viewRef.onDestroy(() => {
    subject.next();
    subject.complete()
  });

  return takeUntil(subject.asObservable())
}

// todo-details.component.ts
@Component({
  selector: 'app-todo-details',
  templateUrl: './todo-details.component.html',
  styleUrls: './todo-details.component.less'
})
export class TodoComponent {
  unsubscribe$ = untilDestroyed();
  refreshDetails$ = new Subject<void>();
  ngOnInit(): void {
    this.refreshDetails$.pipe(unsubscribe$).subscribe();
  }
}

결론

Cette nouvelle fonctionnalité est sans nul doute très puissante et les possibilités d'utilisations et de composition sont quasiment sans limites mais elle possède aussi des inconvénients.

Premièrement, cette nouveauté ne peut s'utiliser uniquement lors de la construction de composants. Cela a pour impact que l'utilisation des paramètres d'entrées 입력 d'un 작곡 아들 불가능. Toutefois un workaround est possible en utilisant les closures, mais je le déconseille fortement.

Deuxièmement, les composants vont être plus compliqués à tester. En effet les mocks vont être difficiles à écrire.