A brief analysis of template reference variables in Angular

<input type="text" [value]="value" #name>

1. The template reference variable can be a DOM element, Angular component (instruction), element, TemplateRef, or even a reference to a Web component in the Angualr template , and it is specific What it is depends on the element it is attached to (without intervention using directives) . As in the previous sample code, the template reference variable name is a reference to the DOM element <input> . [Related tutorial recommendation: "angular tutorial"]

<app-component #component [input]="variable"></app-component>
{{ component.input }}
{{ component.func() }}

Through the template reference variable, we obtain the instance reference of app-component component, which allows us to easily access the members inside app-component component in the template.
2. Angular assigns values ​​to template variables based on the location of the variable you declare:

• if you declare a variable on a component, the variable will refer to the component instance.

• If you declare a variable on a standard HTML markup, the variable refers to that element.

• If you declare a variable on the <ng-template> element, the variable will reference a TemplateRef instance to represent the template.

• If the variable specifies a name on the right, such as #var="ngModel" , then the variable will refer to the directive or component with the exportAs name on the element.

3. Using NgForm with template variables <br/> The NgForm directive here demonstrates how to reference different values ​​by referencing the exportAs name of the directive. In the following example, the template variable itemForm appears three times in the HTML.

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>
 
<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

* If there is no ngForm attribute value, the value referenced by itemForm will be the <form> element. Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......

and after using NgForm , itemForm is a reference to the NgForm directive. You can use it to track the value and validity of each control in the form.

Compared with the native <form> Different elements, NgForm directive has a form attribute. If itemForm.form.valid is invalid, then NgForm 's form attribute will let you disable the submit button.

In fact, when using angular to write list pages, template reference variables are often used:

Reference the executeQuery() method of ngxQuery in the input box of the list component. Of course, if we want to use template reference variables in ts, we must use @ViewChild and @ViewChildren, which are the decorators provided to us by Angular.

We obtain the ngxQuery component through the template variable name in ts:

In ts, you can directly call the ExecuteQuery() method of ngxQuery and refresh the list when parameters are passed in:

(Relevant content about the ViewChild decorator can be found here******)

For parent-child components, template reference variables can also be used directly:

buGroup is an array in bugroupSelectComponent, which is passed as a template reference variable through the parent-child component. come over:

Get the value of the child component in the parent component ts and use: