通过angular中的指令访问模板变量

我目前正在编写一个指令，它只处理dom元素

我想访问作为指令宿主的元素的模板变量，但我无法这样做，因为结果总是未定义的

指令：

@指令({
选择器：“[sample指令]”
})
export class SampleDirective实现AfterViewInit{
@ViewChild（'queryMe'）queryMe:ElementRef；
ngAfterViewInit（）：void{
console.log（this.queryMe）；
}
}

sampleComponent.template.html：

用法：

---

可以这样使用模板变量吗？

角度指令没有模板。这就是它们与有模板的角度组件的区别

由于指令没有模板，因此无法在其上获取ViewChild或ContentChild之类的内容。同样出于同样的原因，您将不会实现

AfterContentInit

、

AfterContentChecked

、

AfterViewInit

和

AfterViewChecked

接口

因此，如果您只需要主机模板中的HTMLElement，请为

div

指定一个类，并使用以下命令从指令访问它：

import { ElementRef, Directive } from '@angular/core'

@Directive({
    selector: '[sample-directive]'
})
export class SampleDirective {

    constructor(private el: ElementRef) {}

    ngOnInit() {
      let elYoureLookingFor = this.el.nativeElement.querySelector('.class-on-div');
    }

}

然后，在sampleComponent.template.html中：

---

将模板变量发送到指令：

@Input（'appQuery'）appQuery:HTMLElement；

编辑 第二种解决方案：为可查询元素提供自定义属性。由于模板变量只是对HTML元素的引用，您将得到几乎相同的结果（除了标记中的一个属性）

get element（）{返回this.el.nativeElement；}
ngAfterViewInit（）{
console.log（this.element.querySelector（'[queryMe]'）；
}

我现在正在做。但我想尝试使用模板变量。事实证明，我不知道这些是如何工作的，所以我有增长知识的空间。@BalázsTakács您不能使用

@ViewChild（'queryMe'）queryMe:ElementRef内部指令类
SampleDirective
，因为它不是指令
SampleDirective
的子元素。谢谢您的回答。还有一个问题。如果指令没有这个生命周期挂钩，为什么它可以与ngAfterViewInit函数一起工作？@Amit Chigadani这里子元素的边界是什么？因为我可以使用viewChild访问SampleComponent。谢谢，但我对模板变量的行为很好奇，我不想用我想要使用的所有元素（5或6）污染我的指令输入。@BalázsTakács我对我的答案进行了编辑，以防你想看到它