#aureliajs benutzerdefiniertes Element über Vererbung

Question

Ich habe 2 benutzerdefinierte Elemente erstellt, die sie von einer Basisklasse ableiten und @useView Decorator verwenden. Aber es sieht so aus, als ob es nicht funktioniert, beide in der gleichen Ansicht zu verwenden, nur die erste erscheint. Illustriert hier https://gist.run/?id=897298ab1dad92fadca77f64653cf32c

Was habe ich falsch gemacht?

Vielen Dank im Voraus.

Answer 1

Verwendung von Vererbung wird nicht empfohlen, wenn Aurelia-Anwendungen erstellt werden. Wir empfehlen, die Komposition über den Dependency-Injection-Container statt über die Vererbung zu verwenden. Dies liegt daran, dass Dependency Injection und Vererbung im Allgemeinen nicht sehr gut zusammenpassen. Dies ist keine Aurelia-Sache, dies ist nur ein Teil davon, wie die Abhängigkeitsinjektion (speziell die Konstruktorinjektion) funktioniert.

Ich würde empfehlen zu ändern, wie Sie dies tun, um die Vererbung zu stoppen.

Answer 2

Ashley hat mich dazu geschlagen! Nur für das Protokoll, hier sind die Code-Änderungen im Kern:

base.html

<template style="display: block;"> 
    It sure did 
    <input type="text" value.two-way="base.search"> 
    <span>${base.search}</span> 
</template> 

base.js

import {transient} from 'aurelia-framework'; 
@transient() 
export class Base { 
    search = "base"; 

    log() { 
    console.log(`${this.search}`); 
    } 
} 

derived.js

import {useView, inject} from 'aurelia-framework'; 
import {Base} from './base' 
@useView('base.html') 
@inject(Base) 
export class Derived 
{ 
    constructor(base) { 
    this.base = base; 
    } 

    bind() 
    { 
    this.base.search="derived"; 
    } 
} 

Derived2. js

import {useView, inject} from 'aurelia-framework'; 
import {Base} from './base'; 
@useView('base.html') 
@inject(Base) 
export class Derived2 { 
    constructor(base) { 
    this.base = base; 
    } 

    bind() 
    { 
    this.base.search="derived2"; 
    } 
}