为 Angular 模板元素引用赋值的目的是什么？

Question

I noticed that some devs assign a value to their element reference like this:

#searchInput="matInput"

And this has the effect of turning off autocomplete for the field. Is that why it's done?

This is a more complete example:

<mat-form-field floatLabel="never">
  <input matInput #searchInput="matInput" type="text" placeholder="Search"/>
</mat-form-field>

This article has more context . It uses the #searchInput in a declarative way only. It will work without assigning a value to #searchInput which made me curious about why people do assign a value to it.

Answer 1

No, it' completely unrelated.

This syntax is used to get the Angular component as a view child of your current component.

In the source code, it's defined in the @Component decorator as exportAs .

(See it on their repo)

It allows a component to declare a variable as a material input, and control it programmatically.

To turn the autocomplete off, this is totally different. Since I'm not sure if you are asking for that of for someone to explain the syntax, I'll simply stop there and wait for you to comment my answer, in case you need it !