Aurelia上的自定义属性不起作用

我是奥雷莉亚的初学者。我想编写一个自定义属性，如下所示：

square.js：

/*jshint esversion: 6 */
import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class SquareCustomAttribute {
  @bindable sideLength;
  @bindable color;

  constructor(element){
    this.element = element;
  }

  sideLengthChanged(newValue, oldValue){
    this.element.style.width = this.element.style.height = `${newValue}px`;
  }

  colorChanged(newValue, oldValue){
    this.element.style.backgroundColor = newValue;
  }
}

您可以在以下内容中看到html：

<template>
  <require from="./square"></require>
  <div square="color.bind: squareColor; side-length.bind: squareSize"></div>
</template>

我得到一个错误：

错误[app router]错误：（SystemJS）无法动态传输ES模块，因为SystemJS.transpiler设置为false

---

你能帮我吗？

一个简单的方法来做你想做的事情（不仅仅是一个属性）是：

试试这个：

square.html

<template bindable="sideLength, color">
    <div css.bind="height: ${sideLength}; width: ${sideLength}; background-color: ${color}"/>
</template>

现在您可以这样使用它：

[any].html

<require from="[path]/[to]/square.html"></require>
.
.
.
<square side-length="50" color="red"></square>
.
.
.

.
.
.
.
.
.

文档中的数据绑定下几乎有一个确切的例子：

---

创建一个答案，以便关闭该答案

---

---

用户的脚本文件出错，导致传输程序失败。将文件扩展名从

.js

更改为

.ts

解决了这个问题，因为TypeScript文件可以由SystemJS处理

这与

SquareCustomAttribute

类和SystemJS transpiler冲突。这门课和你们其他的课写得一样吗？我试过不同的课。我总是收到这个错误你在你的构建或任务文件夹中更改了什么吗？我找到了。问题太复杂了…我把js改成了ts@user2505235-这就是我问这个是否和其他类一样写的时候的意思。很高兴您对其进行了排序。自定义元素（如您所述）！=自定义属性（OP询问过）在我回答后意识到。。我修改了我的答案，以反映这是一个选项，以实现他正在尝试的，但它不是属性路径。