angular - 从 Angular 中的模板引用变量中获取 ElementRef

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 服务，然后像这样在模板中访问注入的服务引用

组件.html

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

指令.ts

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