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中如何工作。

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

1 个答案: