html - 如何使用 Angular 将值绑定(bind)到 Web 组件的属性？

Question

让我先说我以前从未真正使用过 Angular。我正在尝试调试我的 Web 组件库的用户之一面临的问题。

我有一个使用 lit-element 的自定义元素，它具有 bool 属性。该 bool 属性具有自定义属性转换器，使其将字符串“false”视为虚假(与 native html 元素 bool 属性相反，该属性的存在使其为真)。转换器如下所示:

{
  fromAttribute(val) {
    if (val === 'false') {
      return false;
    }
    if (val === '') {
      return true;
    }
    return Boolean(val);
  },
  toAttribute(val) {
    if (!val) {
      return null;
    }
    return '';
  }
}

据我所知，Angular 有两种方法可以将值绑定(bind)到模板中的 html 元素:

按属性，enabled="{{ enabled }}"

按属性，[enabled]="enabled"

对于像 <img> 这样的原生元素，属性绑定(bind)按预期工作 - 我在检查 html 时可以看到属性。

对于自定义元素，似乎根本没有设置属性——无论如何，Angular 似乎都在设置一个属性。但是，它正在对值进行字符串化。

这是一个试图证明这一点的堆栈 Blitz : https://stackblitz.com/edit/angular-lit-element-1vz1nf?file=src%2Fapp%2Fapp.component.ts

我有一个自定义 <hello-world>接受 name 的组件, 和 enabled .如果您检查 html，则 name 根本没有设置为属性。 enabled已设置，但未达到我期望的值。

还有一个 <img>标签，其中 src设置正确。

Angular 特殊情况自定义元素是否只设置属性？这是在某处记录的吗？对我来说，这感觉像是一个错误，并破坏了一些在 Angular 中使用我的自定义元素的人的代码。

Answer 1

要绑定(bind)到属性，您需要使用 [attr.*]绑定(bind)，否则您将绑定(bind)到元素的属性，或 @Input()的自定义元素/组件。在您的示例中，这看起来像:

<hello-world name="{{ name }}" [attr.enabled]="enabled"></hello-world> 

stack

您还有 @Attribute()装饰师。我已将它的一个示例添加到堆栈中。我不知道这在自定义元素中会是什么样子。我知道你不能对它进行动态绑定(bind)。该值需要固定，并且需要是字符串