<input type="text" [value]="value" #name>
1. 템플릿 참조 변수는 DOM 요소, Angular 구성 요소(명령어), 요소, TemplateRef 또는 Angualr의 웹 구성 요소에 대한 참조일 수도 있습니다. template 이며 구체적입니다. 그 내용은 첨부된 요소에 따라 다릅니다(지시문을 사용하여 개입하지 않음) . 이전 샘플 코드와 마찬가지로 템플릿 참조 변수 name 은 DOM 요소 <input> 에 대한 참조입니다. [관련 튜토리얼 추천: "angular tutorial"]
<app-comComponent #comComponent [input]="variable"></app-comComponent>
{{ 구성요소.입력 }}
{{ component.func() }} 템플릿 참조 변수를 통해 app-component 구성 요소의 인스턴스 참조를 얻습니다. 이를 통해 템플릿의 app-component 구성 요소 내부 멤버에 쉽게 액세스할 수 있습니다.
2. Angular는 선언한 변수의 위치에 따라 템플릿 변수에 값을 할당합니다.
구성 요소에 변수를 선언하면 해당 변수는 구성 요소 인스턴스를 참조합니다.
표준 HTML 마크업에서 변수를 선언하면 변수는 해당 요소를 참조합니다.
<ng-template> 요소에 변수를 선언하면 변수는 TemplateRef 인스턴스를 참조하여 템플릿을 나타냅니다.
변수가 오른쪽에 #var="ngModel" 과 같은 이름을 지정하는 경우 변수는 요소의 exportAs 이름이 있는 지시문이나 구성 요소를 참조합니다.
3. 템플릿 변수와 함께 NgForm 사용 <br/> 여기서 NgForm 지시어는 지시어의 exportAs 이름을 참조하여 다양한 값을 참조하는 방법을 보여줍니다. 다음 예에서는 템플릿 변수 itemForm HTML에 세 번 나타납니다.
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name">이름</label>
<input type="text" id="name" class="form-control" name="name" ngModel 필요 />
<button type="submit">제출</button>
</form>
<div [hidden]="!itemForm.form.valid">
<p>{{ submitMessage }}</p>
</div> * ngForm 속성값이 없을 경우 itemForm에서 참조하는 값은 <form> 요소가 됩니다. Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
그리고 NgForm 사용한 후에 itemForm NgForm 지시문에 대한 참조입니다. 이를 사용하여 양식에 있는 각 컨트롤의 값과 유효성을 추적할 수 있습니다.
기본 <form> 과 비교하면 다음과 같습니다. <form> 다른 요소에는 NgForm 지시문에 form 속성이 있습니다. itemForm.form.valid 가 유효하지 않은 경우 NgForm 의 form 속성을
사용하면 실제로 각도를 사용하여 목록 페이지를 작성할 때 템플릿 참조 변수가 비활성화되는 경우가 많습니다
.사용된:
목록 컴포넌트의 입력란에서 ngxQuery의 ExecuteQuery() 메소드를 참조하세요. 물론 ts에서 템플릿 참조 변수를 사용하려면 Angular에서 제공하는 데코레이터인 @ViewChild 및 @ViewChildren을 사용해야 합니다.
ts의 템플릿 변수 이름을 통해 ngxQuery 구성 요소를 얻습니다.
ts에서는 ngxQuery의 ExecuteQuery() 메서드를 직접 호출하고 매개변수가 전달될 때 목록을 새로 고칠 수 있습니다.
(ViewChild 데코레이터에 대한 관련 내용은 여기******에서 찾을 수 있습니다.)
부모-자식 구성 요소의 경우 템플릿 참조 변수를 직접 사용할 수도 있습니다.
buGroup은 bugroupSelectComponent의 배열이며, 이는 템플릿 참조 변수로 전달됩니다. 부모-자식 구성 요소입니다.
상위 구성 요소 ts에서 하위 구성 요소의 값을 가져오고 다음을 사용합니다.
