Получите ElementRef из ссылочной переменной шаблона в Angular

Question

В следующем коде

<input #myRef1 />
<input #myRef2 my-custom-attribute />

В #myRef1 будет ElementRef, а также #myRef2 будет MyCustomAttributeComponentдиректива. По сути, он неявно находит первый компонент и связывает его со ссылочной переменной шаблона. Я могу указать, какую директиву / компонент я хочу, благодаряexportAs, но здесь я действительно хочу ElementRef в обоих случаях.

Есть что заставить #myRef2 быть ElementRef БЕЗ TypeScript@ViewChild(..., { read: ElementRef }). Мне нужен доступmyRef2 как ElementRef в моем шаблоне.

Answer 1

Ввести службу ElementRef в директиве, затем получить доступ к внедренной ссылке службы в шаблоне, подобном этому

component.html

<input #ref="custom" type="text" appCustom>
{{ref.template}}

directive.ts

import { Directive, ElementRef } from '@angular/core';
@Directive({
    selector: '[appCustom]',
    exportAs: 'custom'
})
export class CustomDirective {     
         constructor(public template:ElementRef) { }     
}