angularangular-dependency-injectionangular-injector

Which type of injector injects the ViewContainerRef or ElementRef?


I read several articles about the two types of injector hierarchies in Angular - the ElementInjector and the EnvironmentInjector hierarchies, and what type of dependencies they provide, and how when some dependencies are not found in the ElementInjector hierarchy first, they are then looked for in the EnvironmentInjector hierarchy. And, if I understood correctly, the EnvironmentInjector hierarchy consists of -

RootInjector -> PlatformInjector -> NullInjector

I'm curious about things like ViewContainerRef, ElementRef etc. These are neither user-defined dependencies, nor they are anything platform-specific - they are framework provided stuff. So which type of injector injects them in my components/directives?


Solution

  • Both ElementRef and ViewContainerRef are special tokens as they are stored in the TNode. They are not provided like regular DI Tokens.

    In both cases, the component's NodeInjector is the one that will provide the value for those tokens.

    export function injectViewContainerRef(): ViewContainerRef {
      const previousTNode = getCurrentTNode() as TElementNode | TElementContainerNode | TContainerNode;
      return createContainerRef(previousTNode, getLView());
    }
    

    Source code

    export function injectElementRef(): ElementRef {
      return createElementRef(getCurrentTNode()!, getLView());
    }
    

    source code