如何使用 Angular 将值绑定到 Web 组件的属性？

Question

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

我有一个自定义元素，使用 lit-element，它有一个布尔值属性。该布尔值属性有一个自定义属性转换器，使其将字符串 "false" 视为假值（与本机 html 元素布尔值属性相反，在该属性中，属性的存在使其为真）。转换器看起来像这样：

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

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

按属性，enabled="{{ enabled }}"
来自属性、[enabled]="enabled"

对于像 <img> 这样的原生元素，属性绑定按预期工作 - 我在检查 html.

时可以看到属性

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

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

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

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

是否 angular 特殊情况自定义元素并且只设置属性？这在某处记录了吗？对我来说，这感觉像是一个错误，并且破坏了一些在 Angular.

中使用我的自定义元素的人的代码

Answer 1

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

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

stack

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

如何使用 Angular 将值绑定到 Web 组件的属性？

How do I bind a value to a web component's attribute using Angular?

html

angular

lit-element