Aurelia class inheritance with custom elements

Question

I'm new to Aurelia, and trying use inheritance with custom elements:

base.js

import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class BaseCustomElement {
    list = [1]
    constructor() {
        console.log(this.list)
    }
}

control1.js

import {bindable, inject} from 'aurelia-framework';
import {BaseCustomElement} from 'base';

@inject(Element)
export class Control1CustomElement extends BaseCustomElement{
    list = [1,3]
    constructor() {
        super()
    }
}

Where am I wrong?

Answer 1

使用extends不extend在这里：

export class Control1CustomElement extend BaseCustomElement{

Answer 2

Without more detail it is impossible to know what the problem is but I'm guessing it has something to do with the contents of list - but, anyway, as a first guess how about

• removing the "@inject(Element)" from the base class
• add 'element' to the constructor of both the base class and the control class
• call super(element) from the control1 constructor
• maybe put 'this.list = [1, 3];' in the constructor of control1 after the super(...) call and just accept that this.list in the base class will only have the one element until the child class constructor has finished.
• ...or... add the new list contents as a parameter of both constructors and pass this down to the base class in the super(...) call.

No idea if this will solve the 'unexpected behaviour' though as we don't know what you're expecting...