Angular 2: Property injection instead of constructor injection

Question

Can I do this:

export class BaseComponent {
protected config: IConfig;

@Inject(AppConfig) protected appConfig: AppConfig;

constructor() 
{ 
    this.config = this.appConfig.getConfig();    
}

instead of this:

export class BaseComponent {
config: IConfig;

constructor(
    private appConfig: AppConfig,
    ) 
{ 
    this.config = appConfig.getConfig();    
}

The goal is to simplify the constructor signature, so all child component to not need to specify appConfig in their constructor. So the components that inherits from BaseComponent to look like this:

@Component({
    selector: 'sport-templates',
    templateUrl: 'templates.component.html',
    styleUrls: [ 'templates.component.scss' ],
    encapsulation: ViewEncapsulation.None
})
export class SportTemplates extends BaseComponent implements OnInit {

    constructor() {
        super();
    }

instead like this:

@Component({
    selector: 'sport-templates',
    templateUrl: 'templates.component.html',
    styleUrls: [ 'templates.component.scss' ],
    encapsulation: ViewEncapsulation.None
})
export class SportTemplates extends BaseComponent implements OnInit {

    constructor(appConfig: AppConfig) {
        super(appConfig);
     }

Have you found out the best solution for constructor injection? — PaladiN
– PaladiN, Commented Feb 20, 2017 at 6:50
I found answer of my question here: stackoverflow.com/questions/42461852/… Thanks. — Nikola Yankov
– Nikola Yankov, Commented May 26, 2017 at 11:55

Mikael Kristensen · Accepted Answer · 2017-02-13 10:52:59Z

3

You can do this:

myService: MyService = this.injector.get(MyService);
constructor(private injector:Injector) {}

The Injector is in @angular/core

answered Feb 13, 2017 at 10:52

Mikael Kristensen

2602 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XOR Over a year ago

While it works, it doesn't look like the true way. More like a Service Locator pattern. Though I have to admit that difference is subtle.

kvetis · Accepted Answer · 2023-03-07 10:28:05Z

2

This is now (since Angular v14) possible to do via the inject function from @angular/core. It behaves the same as the decorator and can be used on property initializers:

@Directive()
export abstract class BaseComponent {
    protected appConfig = inject(AppConfig)
}

Therefore, you don't need to call super(appConfig) any more.

answered Mar 7, 2023 at 10:28

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Comments

Suren Srapyan · Accepted Answer · 2017-02-13 11:16:01Z

0

No you can't do it. Injectable service will e injected when the constructor is called.

The goal is to simplify the constructor signature.

There is no need to simplify constructor signature. For readability you can write them in multiple lines.

so all child component to not need to specify appConfig in their constructor

In your case only classes that inherit your class will access that. But if you mean child component those ones which are used in your component, they can't access variables in parent component. You need to pass them.

UPDATED

Your this.config is always visible in inherited components. There is no need to again inject appConfig in the SportTemplates component.

edited Feb 13, 2017 at 11:16

answered Feb 13, 2017 at 10:42

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

4 Comments

Nikola Yankov Over a year ago

Thank you for the reply. I added a bit clarification in my question.

Vladi Pavelka Over a year ago

Now I have a BaseComponent which is inhereted by 19 child components. BaseComponent needs a service, to define a method which will get inhereted. Now I need to "send this service via" constructors of all 19 children. I guess that's what he meant with 'so all child components not need to specify "..." in their constructors'

Suren Srapyan Over a year ago

If you have inheritance, you need to provide from child constructors to the parent constructor via super() call.

Vladi Pavelka Over a year ago

@SurenSrapyan of course, therefore the 'Property injection instead of constructor injection' question, so that I don't have to.

Collectives™ on Stack Overflow

Angular 2: Property injection instead of constructor injection

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related