Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 - Mix dependency injection in constructor with other arguments

In the following class I'd like to abstract away the http dependency, such that Angular 2 uses the normal dependency injection to inject the http object.

import { Http } from '@angular/http';

class MyCollectionView<T> extends CollectionView {
  constructor(private endpoint: string, private http: Http) {
  }

  // ... implemenation of class ...
}

I'd like to use the class as follows:

class MyClass {
  private collection: MyCollectionView<ITestRow>;

  constructor() {
    this.collection = new MyCollectionView<ITestRow>('/some/endpoint');
  }
}

To instantiate in my current implementation I have to write

class MyClass {
  private collection: MyCollectionView<ITestRow>;

  constructor(private http: Http) {
    this.collection = new MyCollectionView<ITestRow>('/some/endpoint', http);
  }
}

As far as I know it's not possible to combine ng2 dependency injection and custom arguments in the constructor. I think I need some kind of factory function that takes care of the dependency injection part but so far I have had no luck. Especially since the class uses also generics. Are there any best practices that I can follow here?

Please note that in unit tests it should still be possible to resolve DI with the MockBackend instead.

I found this question on stackoverflow, but its most upvoted answer can not be used IMHO because the arguments have to be dynamic.

like image 595
dotcs Avatar asked Nov 28 '16 16:11

dotcs


People also ask

Can we inject component in constructor in Angular?

One component cannot be injected via constructor into another component. Save this answer. Show activity on this post. You can call any function or variable of another component using dependency injection.

What is @inject in constructor Angular?

@Inject() is a manual mechanism for letting Angular know that a parameter must be injected. It can be used like so: import { Component, Inject } from '@angular/core'; import { ChatWidget } from '../components/chat-widget'; ​

What is injectable ({ providedIn root })?

The service itself is a class that the CLI generated and that's decorated with @Injectable. By default, this decorator is configured with a providedIn property, which creates a provider for the service. In this case, providedIn: 'root' specifies that the service should be provided in the root injector.

What is the use of @injectable in Angular?

The @Injectable() decorator defines a class as a service in Angular and allows Angular to inject it into a component as a dependency. Likewise, the @Injectable() decorator indicates that a component, class, pipe, or NgModule has a dependency on a service. The injector is the main mechanism.


1 Answers

Dependency injection (DI) only works for classes created by DI. If you create classes with new Xxx(), there is no DI happening.

If the instance is created by DI then you can't pass your own parameters.
You would need to create providers for these parameters for DI to be able to inject them.

What you're doing is the correct way.

like image 121
Günter Zöchbauer Avatar answered Oct 24 '22 21:10

Günter Zöchbauer