1. Description
Le modèle Angular2 est utilisé pour afficher l'apparence des composants. Son utilisation est fondamentalement la même que la syntaxe HTML. Le modèle Angular2 le plus simple est un morceau de code HTML. La syntaxe du modèle angulaire comprend principalement les parties suivantes:
L BESOIR DIRECT
L Expression d'interpolation
L reliure d'attribut
L BESOIN D'ÉVÉNEMENT
L Besure bidirectionnelle
L reliure du style
L Modèles et *
l Variables locales
Tout d'abord, jetons un coup d'œil à un exemple de modèle, comme indiqué ci-dessous:
import { Component, OnInit } from '@angular/core';@Component({selector: 'ui-demo',template: ` <form role="form"><div><legend>title</legend></div><span>attention: {{msg}}</span><div><div>name</div><input type="text" id="name" name="name" [att.size] = "taille" [placeholder] = "name"> </div> <div> <div> Âge </div> <input type = "text" (change) = "change ()" id = "age" name = "age" [placeholder] = "age"> </ div> <div> <div> sexe </ div> <entrée = "text" [(ngmodel)]] [placeholder] = "Sex"> </ div> <div * ng-if = "NeedPwd"> <div> pwd </div> <insegment #inpwd type = "mot de passe" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <bouton type = "bouton" (cliquez) = "show (inpwd.value)"> warn </futton> </div> <div> <div [style.color] = "colore"> <bouton type = "soumettre" [class.btn-primary] = "isPrimary"> soumettre </ bouton> </v> </ div> </ form> `}) Export templatemocomponen "Précautions"; name: string = "name"; size: nombre = 4; Âge: nombre = 15; sex: string = 'male'; NeedPwd: boolean = true; pwd: string = ''; colore: string = "red"; isPrimary: boolean = true; constructor () {} ngonIt () {} change () {} show () event) {console.log ($ event);}}1.1 Liaison directe
Lier la chaîne directement à l'attribut correspondant, par exemple, liez le formulaire de chaîne à l'attribut de titre
<gend> titre </gend>
1.2 Expression d'interpolation
L'expression d'interpolation est exprimée sous la forme de {{}}, et les valeurs de l'expression correspondante dans le composant sont liées au modèle pour l'affichage. Par exemple, les valeurs de l'expression MSG sont affichées dans le composant comme suit.
<span> Attention: {{msg}} </span>1.3 Attribut liant
La liaison de l'attribut est exprimée sous la forme de [], liant la valeur de l'expression à l'attribut correspondant, par exemple, liant la valeur d'expression du nom dans le composant à l'espace réservé de la propriété
<div> <div> name </ div> <input type = "text" id = "name" name = "name" [placeholder] = "name"> </div>
Lorsqu'il y a un attribut correspondant dans l'élément lié à l'attribut, [xx] peut être utilisé pour se lier directement. Cependant, lorsqu'il n'y a pas d'attribut correspondant sur l'élément, [att.xxx] doit être utilisé pour ajouter un point pour lier les informations d'attribut correspondantes.
<div> <div> name </ div> <input type = "text" id = "name" name = "name" [att.size] = "size" [placeholder] = "name"> </ div>
1.4 Liaison de style
La liaison de style comprend principalement deux styles de style pratique et de style en ligne et la liaison de la classe de style externe.
1.4.1 Liaison de style
La liaison du style est syntaxiquement similaire à la liaison des propriétés. Cependant, la pièce des crochets n'est pas le nom d'attribut d'un élément, mais comprend un préfixe de style suivi d'un point (.), Puis le nom d'attribut du style CSS. Indique que la propriété est utilisée sur l'élément spécifié, comme indiqué dans: [style.style-Porty]. Par exemple
<div> <div [style.color] = "Color"> <Button Type = "Soumider" [class.btn-primary] = "isPrimary"> Soumider </ Button> </div> </div>
1.4.2 Class Liaison
La liaison de la classe CSS est syntaxiquement similaire à la liaison des propriétés. Cependant, la partie des crochets n'est pas le nom d'attribut d'un élément, mais comprend un préfixe de classe suivi d'un point (.), Puis composé du nom de la classe CSS, comme indiqué dans: [class.class-name]. Indique s'il faut utiliser la classe CSS sur cet élément ou supprimer la classe CSS. Si la valeur suivante est vraie, le tableau sera utilisé. Faux moyens pour le supprimer.
<div> <div [style.color] = "Color"> <Button Type = "Soumider" [class.btn-primary] = "isPrimary"> Soumider </ Button> </div> </div>
1,5 * avec <mpelate>
Tout d'abord, jetons un coup d'œil à un exemple de * et <mpelate>.
<div * ng-if = "cela cela
* est un sucre de syntaxe qui facilite la lecture et l'écriture d'instructions qui nécessitent des modèles pour modifier les dispositions HTML. NGFOR, NGIF et NGSWitch Ajouter ou supprimer les sous-arbres des éléments qui sont enveloppés dans la balise <mpelate>. Utilisez la syntaxe * du préfixe pour ignorer la balise <mpelate>, le code restauré est le suivant
<template [ngif] = "NeedPwd"> <div> <div> pwd </ div> <inseny type = "mot de passe" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </ template>
1.6 Variables locales
Les variables locales sont représentées sous la forme de #xxx. Si vous utilisez cette expression sur un élément, XXX peut être utilisé pour représenter l'élément. Les variables locales peuvent être utilisées dans le même élément, l'élément de frère ou tout élément enfant. Comme indiqué ci-dessous, vous pouvez utiliser cette variable pour représenter l'élément dans un nœud de frère
<div * ng-if = "NeedPwd"> <div> pwd </div> <entrée #inpwd type = "mot de passe" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <bouton type = "bouton" (clique
1.7 Liaison des événements
La liaison d'attribut est exprimée sous la forme de () et lie la méthode du composant à l'événement correspondant. Par exemple, lie la fonction de changement à l'événement de changement et la fonction de changement sera déclenchée lorsque l'événement de changement se produit.
<div> <div> Âge </div> <input type = "text" (change) = "change ()" id = "age" name = "age" [placeholder] = "age"> </div>
1,8 reliure bidirectionnelle
La liaison bidirectionnelle utilise la méthode [()] pour représenter que la liaison bidirectionnelle est une combinaison de liaison d'attribut et de liaison d'événements. La liaison bidirectionnelle la plus couramment utilisée consiste à utiliser [(ngModel)] = ”xxx” dans la forme. Lors de la modification des données dans le formulaire, les éléments de données liés seront modifiés. Comme indiqué ci-dessous: lorsque le formulaire est entré à modifier, la variable sexuelle sera également modifiée de manière synchrone
<div> <div> Sex </div> <entrée type = "Text" [(ngModel)] = "Sex" id = "Sex" name = "Sex" [placeholder] = "Sex"> </div>
Ce qui précède est la connaissance pertinente de la grammaire du modèle Angular2 qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web du réseau Wulin!