<input type="text" [value]="value" #name>
1. يمكن أن يكون المتغير المرجعي للقالب عنصر DOM أو مكون Angular (تعليمات) أو عنصر أو TemplateRef أو حتى مرجعًا لمكون ويب في Angualr template ، وهو محدد ويعتمد على العنصر المرتبط به (دون التدخل باستخدام التوجيهات) . كما هو الحال في نموذج التعليمات البرمجية السابق، name المتغير المرجعي للقالب هو مرجع لعنصر DOM <input> . [توصية البرنامج التعليمي ذات الصلة: "البرنامج التعليمي الزاوي"]
<app-component #component [input]="variable"></app-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>
</النموذج>
<div [خفي]="!itemForm.form.valid">
<p>{{ إرسال رسالة }}</p>
</div> * إذا لم تكن هناك قيمة لسمة ngForm، فستكون القيمة المشار إليها بواسطة itemForm هي العنصر <form> . Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
وبعد استخدام NgForm ، يعد itemForm مرجعًا لتوجيهات NgForm. ويمكنك استخدامه لتتبع قيمة وصلاحية كل عنصر تحكم في النموذج.
مقارنةً بالنموذج <form> الأصلي <form> عناصر مختلفة، توجيه NgForm له سمة form . إذا كان itemForm.form.valid غير صالح، فستسمح لك سمة form NgForm بتعطيل زر الإرسال.
في الواقع، عند استخدام الزاوي لكتابة صفحات القائمة، غالبًا ما تكون المتغيرات المرجعية للقالب مستخدم:
قم بالإشارة إلى طريقة تنفيذ Query () الخاصة بـ ngxQuery في مربع الإدخال الخاص بمكون القائمة. بالطبع، إذا أردنا استخدام المتغيرات المرجعية للقالب في ts، فيجب علينا استخدام @ViewChild و @ViewChildren، وهما أدوات الديكور التي توفرها لنا Angular.
نحصل على مكون ngxQuery من خلال اسم متغير القالب في ts:
في ts، يمكنك الاتصال مباشرةً بطريقة ExecuteQuery() الخاصة بـ ngxQuery وتحديث القائمة عند تمرير المعلمات:
(يمكن العثور على المحتوى ذي الصلة بمصمم ViewChild هنا******)
بالنسبة للمكونات الأصلية والفرعية، يمكن أيضًا استخدام المتغيرات المرجعية للقالب مباشرة:
buGroup عبارة عن مصفوفة في bugroupSelectComponent، والتي يتم تمريرها كمتغير مرجعي للقالب من خلال يأتي مكون الوالدين والطفل:
احصل على قيمة المكون الفرعي في المكون الأصلي واستخدم:
