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

Question

在下面的代码中

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

#myRef1 将是一个 ElementRef，#myRef2 将是 MyCustomAttributeComponent 指令。基本上，它隐式地找到第一个组件并将其关联到模板引用变量。由于 exportAs，我可以强制使用我想要的 directive/component，但在这里，我实际上在两种情况下都想要 ElementRef。

有没有什么东西可以强制 #myRef2 成为 ElementRef 没有 TypeScript @ViewChild(..., { read: ElementRef })。我需要在我的模板中以 ElementRef 的形式访问 myRef2。

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) { }     
}

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

Get the ElementRef from the Template reference variable in Angular

angular

angular-template-variable