Question

我目前正在研究一个仅操作dom元素的指令。

我想访问作为指令宿主的元素的模板变量，但由于结果始终是不确定的，因此我无法执行此操作。

指令：

@Directive({
    selector: '[sample-directive]'
})
export class SampleDirective implements AfterViewInit {
    @ViewChild('queryMe') queryMe: ElementRef;

    ngAfterViewInit(): void {
        console.log(this.queryMe);    
    }
}

sampleComponent.template.html：

<div #queryMe></div>

用法：

<sample-component [sample-directive]></sample-component>

是否可以使用这样的模板变量？

Answer 1

将模板变量发送到您的指令：stackblitz

@Input('appQuery') appQuery: HTMLElement;

<div [appQuery]="queryMe">
  <div #queryMe></div>
</div>

编辑

第二个解决方案：为您的可查询元素提供自定义属性。由于模板变量只是对HTML元素的引用，因此您将获得几乎相同的结果（标签中还有一个属性除外）。

Stackblitz

get element() { return this.el.nativeElement; }
ngAfterViewInit() {
  console.log(this.element.querySelector('[queryMe]'));
}

<div appQuery>
  <div queryMe></div>
</div>

Answer 2

角度指令没有模板。这就是它们与具有模板的Angular Components的区别。

由于指令没有模板，因此无法在其上获取诸如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中：

<div class="class-on-div"></div>

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

2 个答案:

编辑