Aurelia - 覆盖自定义元素内的 css 绑定答案

【问题标题】：Aurelia - Overriding css binding inside custom elementAurelia - 覆盖自定义元素内的 css 绑定
【发布时间】：2017-03-24 07:58:36
【问题描述】：

我想要实现的是拥有自定义元素并将css直接从父元素绑定到这个元素，也从自定义元素内部绑定。

父母：

<div>
   <custom-element css="height: ${heightProperty}"></custom-element>
</div>

自定义元素：

<template css="width: ${widthProperty}">
</template>

但宽度和高度属性不会同时绑定。只有最后绑定（更改）的那个才会生效。但是在设置类属性时合并似乎有效。那么这是错误还是有意的？

【问题讨论】：

您是否介意将此作为错误发布到模板绑定存储库，以便我们讨论这是错误还是预期行为？谢谢:-)
@AshleyGrant 老实说，我希望最外面的绑定（在单个属性上）简单地覆盖最里面的绑定。我认为这与class 属性一起工作的事实是classList 是一个数组（它使用集合观察者）而不是style（它是一个对象），但仍然是一个无意的结果，不是吗？

【解决方案1】：

不确定这是否是正确的方法/正确的方法，但是当您将可绑定的 CSS 属性添加到自定义元素时会发生什么？

像这样：

import { bindable } from 'aurelia-framework';
export class customElement {
  @bindable()
  css = '';
}

然后在你的 HTML 中

<template css="width: ${widthProperty} ${css}">
</template>

【讨论】：

这行得通。但我仍然认为这是一种解决方法。编辑：但
我根本不认为这是一种解决方法。你试图做的相当于<custom-element css="height: ${heightProperty} css="width: ${widthProperty}">。 @Erik 说得对。