我可以将自定义打字稿组件转换为 Angular 中的 HTMLElement 吗？

Question

If I have a custom component in Angular. Ex. 'my-component'

Is there a way to convert this component to a HTMLElement to pass to a function, if the function takes a HTMLElement as a parameter?

I know the HTMLElement comes from this library: lib.dom.d.ts -> located in node_modules -> typescript -> lib -> lib.dom.d.ts -> HTMLElement

Here is an image of the element:

Answer 1

I believe the Angular Component class doesn't represent an actual element in the DOM, it's nothing more than a blueprint. In order to create the actual element, you first need to to create it as part of the Angular Component tree and then get a reference to the actual element in the dom through the ElementRef .

Of course this is only possible if everything is running in the Angular Context. The only way to use an Angular Component without Angular is to convert it into a Custom Element , here's a pretty neat tutorial on how to do it https://medium.com/@lavanya.kakimallaiah/creating-a-custom-element-in-angular-aa2a794fd041

Answer 2

If you inject in constructor ElementRef, you can "reach" in elementRef.nativeElement

htmlRef:any
constructor(private elementRef:ElementRef)
{
    this.htmlRef=elementRef.nativeElement
}

But the really important question is: What is the reason to need the htmlRef in Angular?