Angular：使用自定义指令访问基本元素引用

Question

Given the following template:

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

How do I make someRef actually reference the HTMLInputelement rather than my-base-directive ? I know i can use exportAs on the directive to make that accessible using the refs, but how do I explicitly not get the directive, and instead get the <input> element?

Stackblitz Link: https://stackblitz.com/edit/angular-z6zvbz

Answer 1

With this: <input my-base-directive #someRef> {{someRef.value}}

someRef will reference the DOM element the input box.

To get to the directive you need to use the 'exportAs' in the directive and use it like this: <input my-base-directive #dir="mybasedir" #someRef [value]="name"> {{someRef.value}}

Check this stackblitz .