我正在使用 TypeScript 开发 Aurelia 应用程序。在此应用程序中，我定义了一组自定义元素，每个元素共享一组可绑定属性，这些属性被转换为 css 设置，如以下简化示例所示：
import {computedFrom, bindable, autoinject} from 'aurelia-framework';
@autoinject
export class MyCustomElement {
@bindable span: number;
@computedFrom('span')
get width() {
return this.span? this.span* 26 : 0;
}
// Leaving out a whole bunch of other code for sake of readability
}
该元素的 HTML 代码看起来像这样：
<template>
<div css="width: ${width}px;">
<svg xmlns="http://www.w3.org/2000/svg" css="width: ${width}px;">
</svg>
</div>
</template>
因此，我在自定义元素的 HTML 模板中多次需要计算属性的值。
现在其他元素也需要span和width财产。据我从阅读中了解到github：Aurelia 问题 #210 https://github.com/aurelia/framework/issues/210尚不支持可绑定属性的继承。正如罗布·艾森伯格所说，这里的方法是使用组合。
但是当使用它时我仍然需要实现span和width属性，还通过依赖注入导入一个组件，该组件仅添加实际计算左边距的功能。所以总而言之，这种方法仍然会导致大量的复制和粘贴代码。
有更好的方法来解决这个问题吗？
在 Twitter 上的 @AureliaEffect 提示后，我正在考虑为此使用自定义属性，但这仍然不会阻止我在元素上实现每个必需的属性，以便能够在元素的模板中绑定到它。
关于其背后的业务案例的简短解释（又名“为什么我选择这种方法”）：我的应用程序的用户能够构建轨道布局，就像您在电子铁路联锁系统中找到的那样。这需要以某些通用单位（而不是像素）指定元素的宽度或其偏移量。此外，需要为每个元素而不是每个元素类指定此属性。
（这里还有另一个问题，StackOverflow 解决了一个有点类似的主题，但方法在我的场景中不起作用：在 Aurelia 的子类上使用 @bindable 属性 https://stackoverflow.com/questions/34756883/using-the-bindable-attribute-on-child-class-in-aurelia)
