<input type="text" [value]="value" #name>
1. La variable de référence du modèle peut être un élément DOM, un composant angulaire (instruction), un élément, TemplateRef ou même une référence à un composant Web dans Angualr. template , et il est spécifique. Ce que c'est dépend de l'élément auquel il est attaché (sans intervention à l'aide de directives) . Comme dans l'exemple de code précédent, le name de la variable de référence du modèle est une référence à l'élément DOM <input> . [Recommandation de didacticiel associée : "tutoriel angulaire"]
<app-component #component [input]="variable"></app-component>
{{ composant.input }}
{{ composant.func() }} Grâce à la variable de référence du modèle, nous obtenons la référence d'instance app-component , ce qui nous permet d'accéder facilement aux membres à l'intérieur app-component dans le modèle.
2. Angular attribue des valeurs aux variables du modèle en fonction de l'emplacement de la variable que vous déclarez :
si vous déclarez une variable sur un composant, la variable fera référence à l'instance du composant.
Si vous déclarez une variable sur un balisage HTML standard, la variable fait référence à cet élément.
Si vous déclarez une variable sur l'élément <ng-template> , la variable fera référence à une instance TemplateRef pour représenter le modèle.
Si la variable spécifie un nom à droite, tel que #var="ngModel" , alors la variable fera référence à la directive ou au composant avec le nom exportAs sur l'élément.
3. Utilisation NgForm avec des variables de modèle <br/> La directive NgForm montre ici comment référencer différentes valeurs en faisant référence au nom exportAs de la directive. Dans l'exemple suivant, la variable de modèle itemForm apparaît trois fois dans le code HTML.
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name">Nom</label>
<input type="text" id="name" class="form-control" name="name" ngModel requis />
<button type="submit">Envoyer</button>
</form>
<div [hidden]="!itemForm.form.valid">
<p>{{ submitMessage }></p>
</div> * S'il n'y a pas de valeur d'attribut ngForm, la valeur référencée par itemForm sera l'élément <form> . Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
et après avoir utilisé NgForm , itemForm est une référence à la directive NgForm. Vous pouvez l'utiliser pour suivre la valeur et la validité de chaque contrôle du formulaire.
Par rapport au <form> natif <form> Différents éléments, la directive NgForm a un attribut form . Si itemForm.form.valid n'est pas valide, alors l'attribut form de NgForm vous permettra de désactiver le bouton de soumission.
En fait, lors de l'utilisation d'angular pour écrire des pages de liste, les variables de référence de modèle sont souvent. utilisé:
Référencez la méthode executeQuery() de ngxQuery dans la zone de saisie du composant liste. Bien sûr, si nous voulons utiliser des variables de référence de modèle dans ts, nous devons utiliser @ViewChild et @ViewChildren, qui sont les décorateurs qui nous sont fournis par Angular.
Nous obtenons le composant ngxQuery via le nom de la variable de modèle dans ts :
Dans ts, vous pouvez appeler directement la méthode ExecuteQuery() de ngxQuery et actualiser la liste lorsque les paramètres sont transmis :
(Le contenu pertinent sur le décorateur ViewChild peut être trouvé ici******)
Pour les composants parent-enfant, les variables de référence de modèle peuvent également être utilisées directement :
buGroup est un tableau dans bugroupSelectComponent, qui est transmis comme variable de référence de modèle via le composant parent-enfant, venez :
Obtenez la valeur du composant enfant dans le composant parent ts et utilisez :
