Question

我已经构建了两个自定义元素，从基类派生它们并使用@useView装饰器。但看起来在同一视图中使用它们并不起作用，只会出现第一个。这里有插图 https://gist.run/?id=897298ab1dad92fadca77f64653cf32c

我错了什么？

提前致谢。

Answer 1

构建Aurelia应用程序时，不建议使用继承。我们建议通过依赖注入容器使用组合而不是继承。这是因为，通常，依赖注入和继承不能很好地混合。这不是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

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";
  }
}

#aureliajs通过继承自定义元素

2 个答案: