首先让我说我以前从未真正使用过 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 '';
}
}
Run Code Online (Sandbox Code Playgroud)
据我所知,Angular 有两种将值绑定到模板中的 html 元素的方法:
enabled="{{ enabled }}"[enabled]="enabled"对于像 这样的本机元素<img>,属性绑定按预期工作 - 我在检查 html 时可以看到该属性。
对于自定义元素,似乎根本没有设置属性 - Angular 似乎无论如何都在设置属性。但是,它正在对值进行字符串化。
这是一个试图证明这一点的 stackblitz:https ://stackblitz.com/edit/angular-lit-element-1vz1nf?file=src%2Fapp%2Fapp.component.ts
我有一个<hello-world>接受name, 和的自定义组件enabled。如果您检查 html,则 name 根本没有设置为属性。 …