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

我目前正在研究仅操作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>

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

最佳答案

将模板变量发送到您的指令: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>