angular - 在 Angular Elements 中设置非字符串属性/输入

Question

可以通过 HTML 中的属性将输入提供给 Angular 元素的实例:

<some-custom-element someArg="test value"><some-custom-element>

或使用 setAttribute .

但属性只能是字符串。

有没有办法传递非字符串，甚至是 JavaScript 对象？也许我可以使用自定义元素直接从应用程序获取组件类的实例？

Answer 1

请注意 setAttribute只接受字符串，因为属性是字符串，但 DOM 元素可以具有非字符串属性。另见:What is the difference between properties and attributes in HTML?

检查自定义元素并注意它实际上是 HTMLElement 的组合。 ( NgElement 更具体地说)和您的组件类:

console.dir(document.querySelector('some-custom-element'));

因此，一旦您找到 DOM 元素，您就已经直接拥有了组件的实例!然后您可以直接访问该对象并在其上设置属性，如下所示:

import {FooElement} from '...';

const myElement = document.querySelector('some-custom-element')! as HTMLElement & FooElement;

// Number instead of string!
myElement.foo = 5;

这将适用于这个示例 Angular Element:

@Component({
  ...
})
export class FooElement {
  @Input() foo = 0;
}

至少这适用于组件的属性。我还没有测试方法是否也被公开，我不确定 EventEmitters 在 Elements 中是如何工作的。