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

Question

我必须htmlElement用 a 引用 a @ViewChild()，有什么办法吗？我必须创建一个 HTMLElement，然后尝试分配对 aviewChild或类似内容的引用。感谢您的关注。

Answer 1

我来这里是为了寻找一种HTMLElement从ViewChild选择子组件中获取的方法。我意识到这并不是问题所在。不过，它可能会有所帮助。

这可以使用以下read选项来实现ViewChild.opts：

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

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

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

Answer 2

这不是那么简单。ViewChild 应该用于：

• 任何带有 Component 或 Directive 装饰器的类

• 作为字符串的模板引用变量（例如使用 ViewChild('cmp') 查询）

• 当前组件的子组件树中定义的任何提供者（例如 ViewChild(SomeService) someService: SomeService）

• 通过字符串标记定义的任何提供者（例如 ViewChild('someToken') someTokenVal: any）

• 一个 TemplateRef（例如使用 ViewChild(TemplateRef) 模板查询；）

在您的情况下，最好使用最后一个选项：

<input #testInput >

TS：

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