#aureliajs継承によるカスタム要素

Question

私は、基本クラスからそれらを派生させ、@useViewデコレータを使用して2つのカスタム要素を構築しました。しかし、それは同じビューで両方を使用するように動作しないように見えますが、最初のものだけが表示されます。 ここに示します https://gist.run/?id=897298ab1dad92fadca77f64653cf32c

どうしたのですか？

ありがとうございます。

Answer 1

Aureliaアプリケーションを構築する場合、継承を使用することはお勧めしません。継承ではなく、Dependency Injectionコンテナによる合成を使用することをお勧めしました。これは、一般的に、依存性注入と継承があまりよく混合されないためです。これはAureliaのことではありませんが、これは依存性注入（具体的にはコンストラクタインジェクション）の仕組みの一部です。

継承を使用しないようにする方法を変更することをお勧めします。

Answer 2

アシュリーは私にそれを打つ！念のために、ここにあなたの要点のコードの変更は以下のとおりです。

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