• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Injection With Inheritance in Aurelia

Aurelia 1 · November 18, 2016

In Aurelia if you have a parent/base class and one or more children that inherit from this class AND the parent class has some injectables via Aurelia’s dependency injection container, you have most likely encountered an issue with needing to import and pass the dependencies back to the parent.

You might have done something like this:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class Parent {
    constructor(router) {
        this.router = router;
    }
}
import {Parent} from './parent';
import {Router} from 'aurelia-router';

@inject(Router)
export class Child extends Parent {
    constructor(router) {
        super(router);
    }
}

Gross.

Or maybe you imported the container directly and did this in your parent/base class:

import {Container} from 'aurelia-framework';
import {Router} from 'aurelia-router';

export class Parent {
    constructor() {
        this.router = Container.instance.get(Router);
    }
}

A little bit better, but still, there is no need to directly access the DI container for such a thing.

What if I told you there was a better way? Let’s use the spread operator and rest parameters to get our parent dependencies:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class Parent {
    constructor(router) {
        this.router = router;
    }
}
import {Parent} from './parent';

export class Child extends Parent {
    constructor(...rest) {
        super(...rest);
    }
}

Now what if you wanted to introduce a new dependency from within your child class? You can just do this:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class Parent {
    constructor(router) {
        this.router = router;
    }
}
import {inject} from 'aurelia-framework';
import {Parent} from './parent';

import {MyService} from './my-service';

@inject(MyService)
export class Child extends Parent {
    constructor(myService, ...rest) {
        super(...rest);
        this.myService = myService;
    }
}

You gotta love Aurelia, sometimes it feels like it makes some things a little TOO EASY.

Dwayne

Leave a Reply Cancel reply

13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Andrew Camilleri
Andrew Camilleri
6 years ago

the real problem of VM inheritance are the bindables not being registered on children. Quite possibly the biggest headache when trying to have the most maintainable code.

0
dave
dave
6 years ago

I’ve tried doing something very similar and I get “Supplied parameters do not match any signature of call target” on the child calls to super(…rest). Any ideas?

0
petronellius
petronellius
6 years ago

Not working with Typescript. It seems like spread operator cannot be used with super(…rest) call in TS.

0
Dwayne
Dwayne
Author
6 years ago

@petronellius

What version of TypeScript are you running? Support was added in a little while ago for rest/spread operators.

0
petronellius
petronellius
Reply to  Dwayne
6 years ago

TypeScript 2.1. I am getting same error as dave. I found issue on github where some developer describes same problem with inheritance and spread operator.
https://github.com/Microsoft/TypeScript/issues/4130
(pfrankov commented on Dec 2, 2016)

0
Dustin
Dustin
5 years ago

Love this design pattern!

0
Eric Taylor
Eric Taylor
5 years ago

I don’t think this actually solves the problem.

In your Child class, try the following:

1) Remove the Router import
2) Remove the Router injection

In other words, simply provide a constructor signature and a super signature with a number of args matching the number of arguments in the Parent class’ constructor.

You will see that it still works. In other words, importing and injecting dependencies in the Child class and passing them to the Parent class appears to have never been necessary. It’s the signatures that matter.

0
Ross MacLachlan
Ross MacLachlan
5 years ago

Thanks, this worked well and much cleaner. (using CLI and requierJS)

0
Corey Harbaugh
Corey Harbaugh
5 years ago

Google never fails to amaze me! I literally googled “Aurelia Inheritance” and landed here on this beaut. Nice work, Sir.

0
Dom
Dom
4 years ago

Oh man, did this save a project I was planning. Thanks so much!

0
Jeff Grann
Jeff Grann
4 years ago

Fantastic! This works very well. Thank you!

Love your Aurelia for Real-World Applications book as well!

0
Luka Cetina
Luka Cetina
4 years ago

This still does not work in Typescript. I’m using typescript v2.7.x.

0
trackback
Inject into child class, from parent that has constructor parameters. (Aurelia) – Fix Code Error
1 year ago

[…] to generate my javascript. Any help would be appreciated, the only things I found so far are: https://ilikekillnerds.com/2016/11/injection-inheritance-aurelia/ But this only solves the case if the parent also injects […]

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz