Angular 2 DI: pass input binding to deps of factory provider

Question

Is there an easy way to inject an input binding into the deps array of a provider factory? Below obviously does not work.

const myServiceFactory = (object: any) => {
   //...
};

@Component({
    // ...
    inputs: ['object'],
    providers: [
        {
            provide: Object,
            useValue: object,
        },
        {
            provide: MyService,
            useFactory: myServiceFactory,
            deps: [Object]
        }
    ]
})

I want to get a specific implementation of MyService based on the input binding — Dominic, Mar 04 '17 at 07:41
That is what I thought but instead of configuring MyService onInit, I would prefer to have a factory method — Dominic, Mar 04 '17 at 07:57
i solved a similar issue with a route Resolve that provides resolved data to a component via ActivatedRoute. I was able to inject the ActivatedRoute (via deps) into a provider factory, grab the data corresponding to the resolved router parameters - and then ‘provide’ my new object. — Simon_Weaver, Jul 23 '19 at 09:00

yurzui · Accepted Answer · 2020-04-21T11:59:04.810

12

As a possible solution you can try to do it something like this:

const myServiceFactory = (self: Child) => {
  return new MyService(self.param);
};

class MyService {
  constructor(private param: string) {}
}
@Component({
  selector: 'child',
  template: `{{ param }}`,
  providers: [
    {
      provide: MyService,
      useFactory: myServiceFactory,
      deps: [Child]
    }
  ]
})
export class Child {
  @Input() param: any;

  constructor(private inj: Injector) { }

  ngOnInit() { // or ngOnChanges
    let service = this.inj.get(MyService);
  }
}

Plunker Example

edited Apr 21 '20 at 11:59

answered Mar 04 '17 at 08:19

yurzui

205,937
32
433
399

surely the input binding of the component isn't available at the time of the provider creation? – Fergal Rooney Oct 23 '18 at 11:57
Disregard... I now see that the provider is created at ngOnInit instead of constructor which is why it works. – Fergal Rooney Oct 23 '18 at 13:08

score 1 · Answer 2 · answered Aug 13 '19 at 20:13

The accepted answer works well, but if you have several dependencies 'provided' by your component that depend on each other than things get a lot more complicated.

Another approach that may work if you're already heavily using observables is to provide a LAZY_ID token which is actually a ReplaySubject<number> (or whatever type you need it to be).

In your ngOnInit() you simply call this.lazyID.next(this.id) to update the ReplaySubject with the value passed in via @Input.

In addition you would then use this LAZY_ID with a provider factory to create whatever the primary dependency was.

Disclaimer: I don't think this is a good general solution to this issue. It can get clumsy but sometimes it may work!

Here's a simplified example - would welcome improvements:

export const LAZY_ID = new InjectionToken<ReplaySubject<number>>('LAZY_ID');

export const LazyIDFactory = () => 
{
    return new ReplaySubject<number>(1);
}


export const productDataFromLazyIDFactory = (productService: ProductService, id$: ReplaySubject<number>) =>
{
    // Create your 'ProductData' from your service and id$
    // So yes - the catch here is your ProductData needs to take an observable
    // as an input - which only really works if you're extensively using observables
    // everywhere. You can't 'wait' for the result here since the factory must return
    // immediately
}

Then in your @Component

providers: [ 

    // creates our ReplaySubject to hold the ID
    {
        provide: LAZY_ID,
        useFactory: LazyIDFactory
    },
    { 
        provide: ProductData,
        useFactory: productDataFromLazyIDFactory,
        deps: [ ProductService, LAZY_ID ]
    },

Angular 2 DI: pass input binding to deps of factory provider

2 Answers2