Angular 5（及更多）：带有 @ViewChild 的 HTMLElement

Question

I have to reference an htmlElement with a @ViewChild() , is there any way to this? I have to create an HTMLElement and then try to assign a reference to a viewChild or something similar. THank you for your attention.

Answer 1

It's not so simple. ViewChild should be used for:

• any class with the Component or Directive decorator

• a template reference variable as a string (eg query with ViewChild('cmp'))

• any provider defined in the child component tree of the current component (eg ViewChild(SomeService) someService: SomeService)

• any provider defined through a string token (eg ViewChild('someToken') someTokenVal: any)

• a TemplateRef (eg query with ViewChild(TemplateRef) template;)

In your case better to use last option:

<input #testInput >

TS:

...
@ViewChild('testInput') input;
...

Answer 2

I came here looking for a way to get the HTMLElement from a ViewChild that's selecting a child component. I realize that this is not exactly what the question is about. Still, it might be helpful.

This can be achived using the read option inside the ViewChild.opts :

<my-child-component #mySelector></my-child-component>

@ViewChild('mySelector', {read: ElementRef})
childElement: ElementRef<HTMLElement>;

doSomething() {
  const htmlElement = childElement.nativeElement;
}