渲染宿主元素时调用指令答案

【问题标题】：Call directive when host element is rendered渲染宿主元素时调用指令
【发布时间】：2020-08-28 14:31:27
【问题描述】：

我在我的角度指令中注入一个表单作为宿主元素。我想检索该表单的输入元素列表。但是，看起来代码是在主机（表单）实际呈现之前执行的（即，在创建输入元素之前）

 constructor(private elementRef: ElementRef,private renderer: Renderer2) { 
  let  formElement = <HTMLFormElement>elementRef.nativeElement;   
  let inputFields = console.log(formElement.getElementsByTagName("input")); //This is blank
  console.log(formElement.getElementsByTagName("input"));      //This is working, but lazy loaded

有没有什么办法只有在宿主视图准备好之后才能执行逻辑？有点像，@HostListener 一些准备好的活动。

【问题讨论】：

你试过使用ngAfterViewInit() {}吗？
根据stackoverflow.com/a/38492522/3019006，我们不能在指令上调用视图相关的回调，因为指令没有任何视图。但是，令人惊讶的是，stackoverflow.com/a/49006974/3019006 有效并且似乎解决了这个问题。我有点困惑。
stackoverflow.com/a/38492522/3019006 不正确（可能已过时）。 angular.io/guide/lifecycle-hooks#!#hooks-overview 声明所有这些钩子都适用于组件和指令

标签： angular typescript angular-directive

【解决方案1】：

正如@Aluan 所建议的，我将其作为未来参考的答案：在 Directive 类中实现AfterViewInit。

DirectiveClass implements AfterViewInit {
constructor(private elementRef: ElementRef,private renderer: Renderer2) { 

  }
ngAfterViewInit(){
  let  formElement = <HTMLFormElement>this.elementRef.nativeElement;   
  let inputFields = console.log(formElement.getElementsByTagName("input")); //This also works
  console.log(formElement.getElementsByTagName("input"));      //This Works
}

【讨论】：