Angular：如何让模板引用变量指向原生元素而非自定义指令

嘿，这个问题我之前也碰到过，分两种场景来处理就好啦：

情况1：my-base-directive是普通属性指令 #

如果你的指令是用@Directive定义的普通属性指令，哪怕它设置了exportAs属性，默认情况下模板里的#someRef都会直接指向<input>元素本身——只有当你特意写#someRef="指令的exportAs名称"时，才会引用指令实例。

举个实际的例子：
先看指令的定义：

import { Directive } from '@angular/core';

@Directive({
  selector: '[my-base-directive]',
  exportAs: 'myBaseDirective' // 这里定义了exportAs
})
export class MyBaseDirective {
  // 这里写指令的逻辑代码
}

然后在模板里这么用：

<!-- 这里的someRef直接就是HTMLInputElement，直接用value没问题 -->
<input my-base-directive #someRef> 
{{ someRef.value }} 

<!-- 要是想引用指令本身，才需要加exportAs的名称 -->
<input my-base-directive #directiveRef="myBaseDirective">
{{ directiveRef.你指令里的属性 }}

这种场景下根本不用额外操作，只要不写="xxx"，引用变量就默认指向input元素啦。

情况2：my-base-directive是属性选择器的组件 #

如果这个“指令”其实是个用@Component定义的组件（选择器为[my-base-directive]），那模板引用变量默认会指向组件实例，而非宿主的<input>元素。这时候有两个办法：

办法一：在组件里把宿主元素暴露出来 #

在组件类里注入ElementRef并公开它，这样就能通过组件实例拿到input元素：

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: '[my-base-directive]',
  template: '<ng-content></ng-content>' // 用ng-content保留input的原有结构
})
export class MyBaseDirectiveComponent {
  // 把ElementRef公开，让模板能访问到
  constructor(public elementRef: ElementRef<HTMLInputElement>) {}
}

然后模板里这么用：

<input my-base-directive #someRef>
{{ someRef.elementRef.nativeElement.value }}

办法二：给input单独加个引用变量 #

最省事的办法就是直接给input多设一个引用变量，完全跳过组件的引用：

<input my-base-directive #someRef #inputElement>
{{ inputElement.value }}

这样inputElement就直接指向input元素，和组件指令互不影响，用起来超方便。

内容的提问来源于stack exchange，提问作者Rasmus Hansen