1. Beschreibung
Die Angular2 -Vorlage wird verwendet, um das Erscheinungsbild von Komponenten anzuzeigen. Seine Verwendung ist im Grunde die gleiche HTML -Syntax. Die einfachste Angular2 -Vorlage ist ein Stück HTML -Code. Die Winkelvorlagensyntax enthält hauptsächlich die folgenden Teile:
l Direkte Bindung
L Interpolationsausdruck
l Attributbindung
l Ereignisbindung
l Zwei-Wege-Bindung
l Bindung im Stil
l Vorlagen und *
l Lokale Variablen
Schauen wir uns zunächst ein Beispiel einer Vorlage an, wie unten gezeigt:
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" [attr.size] = "Größe" [Platzhalter] = "Name"> </div> <div> <div> Alter </div> <Eingabe type = "text" (Änderung) = "change ()" id = "Alter" name = "Alter" [Platzhalter] = "Alter"> </div> <div> <div> </div> <Eingabe -Typ = ". [Platzhalter] = "sex"> </div> <div *ng-if = "musempwd"> <div> pwd </div> <Eingabe #inpwd type = "password" [(ngmodel)] (klicken) = "show (inpwd.value)"> Warn </button> </div> <div> <div [style.color] = "color"> <button type = "subieren" [class.BTN-Primary] = "iSprimary"> sublect </button> </div> </div> </form> ` #`}). "Vorsichtsmaßnahmen"; Name: String = "Name"; Größe: Nummer = 4; Alter: Nummer = 15; Sex: String = 'male'; Needpwd: boolean = true; pwd: string = ''; color: string = "rot"; {console.log ($ event);}}1.1 direkte Bindung
Binden Sie die Zeichenfolge direkt an das entsprechende Attribut, beispielsweise die Zeichenfolgenformular an das Titelattribut
<Legend> Titel </legend>
1.2 Interpolationsausdruck
Der Interpolationsausdruck wird in der Form von {{}} ausgedrückt, und die Werte des entsprechenden Ausdrucks in der Komponente sind an die Vorlage für die Anzeige gebunden. Beispielsweise werden die Werte der MSG -Expression wie folgt in der Komponente angezeigt.
<span> Achtung: {{msg}} </span>1.3 Attributbindung
Die Attributbindung wird in der Form von [] ausgedrückt, wobei der Wert der Expression an das entsprechende Attribut gebunden wird, beispielsweise die Bindung des Namensxpressionswerts in der Komponente an den Eigenschaftsplatzhalter
<div> <div> Name </div> <Eingabe type = "text" id = "name" name = "name" [platzhalter] = "name"> </div>
Wenn im Element, das an das Attribut gebunden ist, ein entsprechendes Attribut vorhanden ist, kann [xx] verwendet werden, um direkt zu binden. Wenn das Element jedoch kein entsprechendes Attribut gibt, muss [Attr.xxx] verwendet werden, um einen Punkt hinzuzufügen, um die entsprechenden Attributinformationen zu binden.
<div> <div> Name </div> <Eingabe type = "text" id = "name" name = "name" [attr.size] = "Größe" [Platzhalter] = "Name"> </div>
1.4 Stilbindung
Die Stilbindung umfasst hauptsächlich zwei bequeme Inline -Stilstil- und externe Stilklassenbindung.
1.4.1 Stilbindung
Die Stilbindung ist syntaktisch der Eigenschaftbindung ähnlich. Der Teil in den Quadratklammern ist jedoch nicht der Attributname eines Elements, sondern enthält ein Stilpräfix, gefolgt von einem Punkt (.) Und dann der Attributname des CSS -Stils. Zeigt an, dass die Eigenschaft im angegebenen Element verwendet wird, wie in: [style.style-perporty]. Zum Beispiel
<div> <div [style.color] = "color"> <button type = "subieren" [class.BTN-Primary] = "iSprimary"> subg </button> </div> </div>
1.4.2 Klassenbindung
Die CSS -Klassenbindung ist syntaktisch der Eigenschaftbindung ähnlich. Der Teil in den Quadratklammern ist jedoch nicht der Attributname eines Elements, sondern enthält ein Klassenpräfix, gefolgt von einem Punkt (.), Das dann aus dem Namen der CSS-Klasse besteht, wie in: [Klasse.ClASS-Name] gezeigt. Gibt an, ob die CSS -Klasse in diesem Element verwendet wird, oder die CSS -Klasse entfernen. Wenn der folgende Wert zutrifft, wird die Tabelle verwendet. Falsch Mittel, um es zu entfernen.
<div> <div [style.color] = "color"> <button type = "subieren" [class.BTN-Primary] = "iSprimary"> subg </button> </div> </div>
1.5 * mit <semplate>
Schauen wir uns zunächst ein Beispiel von * und <Semplate> an.
<div *ng-if = "Needpwd"> <div> pwd </div> <Eingabe type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div>
* ist ein Syntaxzucker, der das Lesen und Schreiben von Anweisungen erleichtert, bei denen Vorlagen zur Änderung von HTML -Layouts erforderlich sind. NGFOR, NGIF und NGSWITCH Fügen Sie alle Element -Subträume hinzu, die in das <Semplate> -Tag eingewickelt sind. Verwenden Sie die * Präfix -Syntax *, um das <semplate> -Tag zu ignorieren. Der restaurierte Code lautet wie folgt
<template [ngif] = "musempwd"> <div> <div> pwd </div> <Eingabe type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </template>
1.6 Lokale Variablen
Lokale Variablen werden in Form von #xxx dargestellt. Wenn Sie diesen Ausdruck in einem Element verwenden, kann XXX verwendet werden, um das Element darzustellen. Lokale Variablen können in demselben Element, im Geschwisterelement oder in einem beliebigen untergeordneten Element verwendet werden. Wie unten gezeigt, können Sie diese Variable verwenden, um das Element in einem Geschwisterknoten darzustellen
<div *ng-if = "Needpwd"> <div> pwd </div> <input #inpwd type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button type = "button" (klick) = "show (inpwd.val)"> ">"> ">"> ">"> "> </</</</</div)
1.7 Ereignisbindung
Die Attributbindung wird in der Form von () ausgedrückt und bindet die Methode der Komponente an das entsprechende Ereignis. Bindet beispielsweise die Änderungsfunktion an das Änderungsereignis, und die Änderungsfunktion wird nach dem Auftreten des Änderungsereignisses ausgelöst.
<div> <div> Alter </div> <Eingabe type = "text" (change) = "change ()" id = "älter" name = "Alter" [Platzhalter] = "Alter"> </div>
1,8 Zwei-Wege-Bindung
Die bidirektionale Bindung verwendet die [()] -Methode, um darzustellen, dass die Zwei-Wege-Bindung eine Kombination aus Attributbindung und Ereignisbindung ist. Die am häufigsten verwendete Zwei-Wege-Bindung ist die Verwendung von [(ngmodel)] = "xxx" in der Form. Beim Ändern der Daten im Formular werden die gebundenen Datenelemente geändert. Wie unten gezeigt: Wenn das Formular zur Änderung eingegeben wird, wird die Geschlechtsvariable auch synchron modifiziert
<div> <div> Sex </div> <Eingabe type = "text" [(ngmodel)] = "sex" id = "sex" name = "sex" [platzhalter] = "sex"> </div>
Das obige ist die relevante Kenntnis der Angular2 -Template -Grammatik, die Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin Network -Website!