Como funciona a injeção de dependência hierárquica do Angular?

Question

Accepted Answer

O DI do Angular é **hierárquico**: injetores formam uma árvore que espelha a árvore de componentes/módulos. Quando um componente solicita uma dependência, Angular caminha **para cima** pela árvore de injetores até encontrar um provider — que controla se você obtém um singleton compartilhado ou uma instância separada por componente. ## A hierarquia do injetor ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Uma busca começa no componente solicitante e sobe até a raiz. O **primeiro** provider encontrado vence. ## Onde você fornece determina o escopo ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` Esta é a alavanca chave: `providedIn: 'root'` fornece uma única instância compartilhada; listar um provider no array `providers` de um componente cria uma instância nova com escopo para aquela subárvore de componentes (útil para isolar estado por componente). ## Modificadores de injeção ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` Estos decoradores controlam *até que ponto* Angular pesquisa a árvore de injetores — por ex. `@Optional` evita um erro quando uma dependência está faltando, `@SkipSelf` força o uso da instância de um pai. ## Tokens de injeção para dependências não-classe ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens permitem que você injete valores/config (não apenas classes) e troque implementações (`useClass`, `useValue`, `useFactory`). ## Por que isso importa Entender o injetor hierárquico explica *por que* um serviço é compartilhado em toda a aplicação versus duplicado por componente — uma fonte frequente de confusão "por que esses componentes compartilham/não compartilham estado?". Controlar o escopo do provider (`root` vs `providers` de componente), usar modificadores (`@Optional`, `@SkipSelf`) e tokens de injeção para config/implementações intercambiáveis é o que torna o DI do Angular poderoso tanto para arquitetura quanto para testes.