1. Deskripsi
Template Angular2 digunakan untuk menampilkan penampilan komponen. Penggunaannya pada dasarnya sama dengan sintaks HTML. Template Angular2 paling sederhana adalah bagian dari kode HTML. Sintaks template sudut terutama mencakup bagian -bagian berikut:
l Direct Binding
l ekspresi interpolasi
l Atribut Ikatan
L Event Binding
l Binding dua arah
L gaya ikatan
l templat dan *
l Variabel lokal
Pertama, mari kita lihat contoh templat, seperti yang ditunjukkan di bawah ini:
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]="size" [placeholder]="name"></div><div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div><div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder] = "sex"> </div> <div *ng-if = "needpwd"> <div> pwd </div> <input #inpwd type = "password" [(ngModel)] = "pwd" id = "pwd" name = "pwd"> <tombol tipe = "tombol" (klik) = "Tampilkan (INPWD.VALUE)"> WARN </button> </div> <div> <div [style.color] = "color"> <tombol type = "kirim" [class.btn-primary] = "isPrimary"> Subpored </butpated </div> </divrimary </``} {TOMPOND </Divents. "Tindakan Pencegahan"; Nama: String = "Name"; size: Number = 4; Umur: Nomor = 15; Sex: String = 'Male'; Needpwd: Boolean = true; pwd: string = ''; color: string = "red"; isPrimary: boolean = true; constructor () {} ngoninit () {{{) {{) {{) {{) {{) {{) {{) {{) {{) {{) {{) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {console.log ($ event);}}1.1 Ikatan Langsung
Bind string langsung ke atribut yang sesuai, misalnya, ikat formulir string ke atribut judul
Judul <Gegend> </Gegend>
1.2 Ekspresi Interpolasi
Ekspresi interpolasi diekspresikan dalam bentuk {{}}, dan nilai -nilai ekspresi yang sesuai dalam komponen terikat pada templat untuk ditampilkan. Misalnya, nilai -nilai ekspresi MSG ditampilkan dalam komponen sebagai berikut.
<span> perhatian: {{msg}} </span>1.3 Ikatan atribut
Ikatan atribut diekspresikan dalam bentuk [], mengikat nilai ekspresi ke atribut yang sesuai, misalnya, mengikat nilai ekspresi nama dalam komponen ke placeholder properti
<div> <div> name </div> <input type = "text" id = "name" name = "name" [placeholder] = "name"> </div>
Ketika ada atribut yang sesuai dalam elemen yang terikat ke atribut, [xx] dapat digunakan untuk mengikat secara langsung. Namun, ketika tidak ada atribut yang sesuai pada elemen, [attr.xxx] harus digunakan untuk menambahkan titik untuk mengikat informasi atribut yang sesuai.
<div> <div> name </div> <input type = "text" id = "name" name = "name" [attr.size] = "size" [placeholder] = "name"> </div>
1.4 Ikatan Gaya
Ikatan gaya terutama mencakup dua ikatan kelas gaya inline yang nyaman dan gaya eksternal.
1.4.1 Ikatan Gaya
Ikatan gaya secara sintaksis mirip dengan pengikatan properti. Namun, bagian dalam tanda kurung persegi bukanlah nama atribut suatu elemen, tetapi termasuk awalan gaya diikuti oleh titik (.), Dan kemudian nama atribut gaya CSS. Menunjukkan bahwa properti digunakan pada elemen yang ditentukan, seperti yang ditunjukkan pada: [style.style-porty]. Misalnya
<div> <div [style.color] = "color"> <tombol type = "kirim" [class.btn-primary] = "isPrimary"> Kirim </button> </div> </div>
1.4.2 Ikatan Kelas
Ikatan kelas CSS secara sintaksis mirip dengan pengikatan properti. Namun, bagian dalam tanda kurung persegi bukanlah nama atribut suatu elemen, tetapi termasuk awalan kelas diikuti oleh titik (.), Dan kemudian terdiri dari nama kelas CSS, seperti yang ditunjukkan dalam: [class.class-name]. Menunjukkan apakah akan menggunakan kelas CSS pada elemen ini atau menghapus kelas CSS. Jika nilai berikut benar, tabel akan digunakan. Berarti salah untuk menghapusnya.
<div> <div [style.color] = "color"> <tombol type = "kirim" [class.btn-primary] = "isPrimary"> Kirim </button> </div> </div>
1.5 * dengan <template>
Pertama, mari kita lihat contoh * dan <lemplate>.
<Div *ng-if = "needpwd"> <div> pwd </div> <input type = "password" [(ngModel)] = "pwd" id = "pwd" name = "pwd"> </div>
* adalah gula sintaks yang membuatnya lebih mudah untuk membaca dan menulis instruksi yang memerlukan templat untuk memodifikasi tata letak HTML. NGFOR, NGIF, dan NGSWITCH semua menambah atau menghapus subtree elemen yang dibungkus dengan tag <lemplate>. Gunakan * sintaks awalan untuk mengabaikan tag <emplate>, kode yang dipulihkan adalah sebagai berikut
<template [ngif] = "needpwd"> <div> <div> pwd </div> <input type = "password" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </demplate>
1.6 Variabel Lokal
Variabel lokal diwakili dalam bentuk #XXX. Jika Anda menggunakan ekspresi ini pada suatu elemen, XXX dapat digunakan untuk mewakili elemen. Variabel lokal dapat digunakan dalam elemen yang sama, elemen saudara atau elemen anak apa pun. Seperti yang ditunjukkan di bawah ini, Anda dapat menggunakan variabel ini untuk mewakili elemen dalam node saudara kandung
<Div *ng-if = "needpwd"> <div> pwd </div> <input #inpwd type = "password" [(ngModel)] = "pwd" id = "pwd" name = "pwd"> <kancing tipe = "tombol" (klik) = "show (inpwd.value)"> warny "> warny"> warny "> warny"> warny "> warn </div </kancing </kancing </"
1.7 Acara Ikatan
Ikatan atribut diekspresikan dalam bentuk () dan mengikat metode komponen ke peristiwa yang sesuai. Misalnya, mengikat fungsi perubahan ke peristiwa perubahan, dan fungsi perubahan akan dipicu ketika peristiwa perubahan terjadi.
<div> <div> usia </div> <input type = "text" (ubah) = "ubah ()" id = "usia" nama = "usia" [placeholder] = "usia"> </div>
1.8 Ikatan dua arah
Ikatan dua arah menggunakan metode [()] untuk mewakili bahwa pengikatan dua arah adalah kombinasi dari pengikatan atribut dan pengikatan peristiwa. Ikatan dua arah yang paling umum digunakan adalah menggunakan [(ngModel)] = ”xxx” dalam bentuk. Saat memodifikasi data dalam formulir, item data terikat akan dimodifikasi. Seperti yang ditunjukkan di bawah ini: Ketika formulir input untuk dimodifikasi, variabel jenis kelamin juga akan dimodifikasi secara sinkron
<div> <div> sex </div> <input type = "text" [(ngModel)] = "sex" id = "sex" name = "sex" [placeholder] = "sex"> </div>
Di atas adalah pengetahuan yang relevan dari tata bahasa template Angular2 yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin Network!