angularrxjsangular-decoratorangular-injector

What is @SkipSelf decorator in Angular?

The @SkipSelf decorator tells DI to look for a dependency in the whole tree starting from the parent injector

I came across the @SkipSelf decorator as below. What does this @SkipSelfdecorator exactly mean in this case?

class Dependency {}

@Injectable()
class NeedsDependency {
  constructor(@SkipSelf() public dependency: Dependency) { this.dependency = dependency; }
}

const parent = ReflectiveInjector.resolveAndCreate([Dependency]);
const child = parent.resolveAndCreateChild([NeedsDependency]);
expect(child.get(NeedsDependency).dependency instanceof Dependency).toBe(true);

const inj = ReflectiveInjector.resolveAndCreate([Dependency, NeedsDependency]);
expect(() => inj.get(NeedsDependency)).toThrowError();
Solution

  • Let's start line by line:

    The first case:

    A. Create parent injector and add Dependency to it:

    const parent = ReflectiveInjector.resolveAndCreate([Dependency]);

    B. Create child injector and add NeedsDependency to it, since Dependency is provided in parent injector, the DI framework can resolve NeedsDependency's dependencies (Dependency)

    const child = parent.resolveAndCreateChild([NeedsDependency]);

    The second case:

    A. Create a single injector and add both Dependency & NeedsDependency to it:

    const inj = ReflectiveInjector.resolveAndCreate([Dependency, NeedsDependency]);

    B. This time resolving NeedsDependency's dependencies will fail, due to @SkipSelf() being applied to Dependency, DI framework will ignore the Dependency instance within inj injector, and try looking up the hierarchy to find a provider that satisfies this dependency which doesn't exist, therefore inj.get(NeedsDependency) will throw an error as NeedsDependency can't be resolved.

    expect(() => inj.get(NeedsDependency)).toThrowError();