1. คำอธิบาย
เทมเพลต Angular2 ใช้เพื่อแสดงลักษณะของส่วนประกอบ การใช้งานของมันนั้นเหมือนกับไวยากรณ์ HTML เทมเพลต Angular2 ที่ง่ายที่สุดคือชิ้นส่วนของรหัส HTML ไวยากรณ์เทมเพลตเชิงมุมส่วนใหญ่มีส่วนต่อไปนี้:
l การผูกโดยตรง
l นิพจน์การแก้ไข
l แอตทริบิวต์ผูกพัน
l เหตุการณ์ที่มีผลผูกพัน
l การผูกสองทาง
l สไตล์ที่มีผลผูกพัน
l เทมเพลตและ *
l ตัวแปรท้องถิ่น
ก่อนอื่นมาดูตัวอย่างของเทมเพลตดังที่แสดงด้านล่าง:
นำเข้า {Component, OnInit} จาก '@Angular/Core';@Component ({selector: 'ui-demo', เทมเพลต: `<form role =" form "> <div> <legend> title </Legend> </div> <span> ความสนใจ: {{{msg}} [attr.size] = "size" [placeholder] = "name"> </div> <div> <div> อายุ </div> <อินพุต type = "text" (เปลี่ยน) = "เปลี่ยน ()" id = "อายุ" name = "อายุ" [placeholder] = "อายุ"> [placeHolder] = "sex"> </div> <div *ng-if = "needpwd"> <div> pwd </div> <อินพุต #inpwd type = "รหัสผ่าน" [(ngmodel)] = "pwd" id = "pwd" ชื่อ = "pwd"> (คลิก) = "show (inpwd.value)"> เตือน </button> </div> <div> <div [style.color] = "color"> <button type = "ส่ง" [class.btn-primary] = "isprimary"> ส่ง </button> </div> "ข้อควรระวัง"; ชื่อ: string = "ชื่อ"; ขนาด: หมายเลข = 4; อายุ: หมายเลข = 15; เพศ: string = 'male'; needpwd: boolean = true; pwd: string = '' color: string = "red"; isprimary: boolean = true; constructor () {console.log ($ event);}}1.1 การผูกโดยตรง
ผูกสตริงโดยตรงกับแอตทริบิวต์ที่สอดคล้องกันตัวอย่างเช่นผูกฟอร์มสตริงกับแอตทริบิวต์ชื่อเรื่อง
<gregend> ชื่อเรื่อง </gendend>
1.2 นิพจน์การแก้ไข
นิพจน์การแก้ไขจะแสดงในรูปแบบของ {{}} และค่าของนิพจน์ที่สอดคล้องกันในส่วนประกอบจะถูกผูกไว้กับเทมเพลตสำหรับการแสดงผล ตัวอย่างเช่นค่าของนิพจน์ MSG จะแสดงในส่วนประกอบดังนี้
<span> ความสนใจ: {{msg}} </span>1.3 การผูกแอตทริบิวต์
การเชื่อมโยงแอตทริบิวต์จะแสดงในรูปแบบของ [] การเชื่อมโยงค่าของนิพจน์กับแอตทริบิวต์ที่สอดคล้องกันเช่นการเชื่อมโยงค่านิพจน์ชื่อในส่วนประกอบกับตัวยึดทรัพย์สิน
<div> <div> ชื่อ </div> <อินพุต type = "text" id = "name" name = "name" [placeholder] = "name"> </div>
เมื่อมีแอตทริบิวต์ที่สอดคล้องกันในองค์ประกอบที่ถูกผูกไว้กับแอตทริบิวต์ [xx] สามารถใช้เพื่อผูกโดยตรง อย่างไรก็ตามเมื่อไม่มีแอตทริบิวต์ที่สอดคล้องกันในองค์ประกอบ [attr.xxx] จะต้องใช้เพื่อเพิ่มจุดเพื่อผูกข้อมูลแอตทริบิวต์ที่เกี่ยวข้อง
<div> <div> ชื่อ </div> <อินพุต type = "text" id = "name" name = "name" [attr.size] = "size" [placeholder] = "name"> </div>
1.4 การผูกสไตล์
การผูกสไตล์ส่วนใหญ่ประกอบด้วยสองสไตล์สไตล์อินไลน์และการผูกคลาสสไตล์ภายนอก
1.4.1 การผูกสไตล์
การเชื่อมโยงสไตล์มีลักษณะคล้ายกับการผูกมัดคุณสมบัติ อย่างไรก็ตามชิ้นส่วนในวงเล็บเหลี่ยมไม่ใช่ชื่อแอตทริบิวต์ขององค์ประกอบ แต่มีคำนำหน้าสไตล์ตามด้วย dot (.) จากนั้นชื่อแอตทริบิวต์ของสไตล์ CSS บ่งชี้ว่าคุณสมบัติที่ใช้กับองค์ประกอบที่ระบุดังแสดงใน: [style.style-perporty] ตัวอย่างเช่น
<div> <div [style.color] = "color"> <button type = "ส่ง" [class.btn-primary] = "isprimary"> ส่ง </button> </div> </div>
1.4.2 การผูกคลาส
การผูกคลาส CSS นั้นคล้ายคลึงกับการเชื่อมโยงคุณสมบัติ อย่างไรก็ตามชิ้นส่วนในวงเล็บเหลี่ยมไม่ใช่ชื่อแอตทริบิวต์ขององค์ประกอบ แต่รวมถึงคำนำหน้าคลาสตามด้วย dot (.) และจากนั้นประกอบด้วยชื่อของคลาส CSS ดังแสดงใน: [class.class-name] ระบุว่าจะใช้คลาส CSS ในองค์ประกอบนี้หรือลบคลาส CSS หากค่าต่อไปนี้เป็นจริงตารางจะถูกใช้ เท็จหมายถึงการลบออก
<div> <div [style.color] = "color"> <button type = "ส่ง" [class.btn-primary] = "isprimary"> ส่ง </button> </div> </div>
1.5 * ด้วย <Memplate>
ก่อนอื่นมาดูตัวอย่างของ * และ <Mestplate>
<div *ng-if = "needpwd"> <div> pwd </div> <อินพุตประเภท = "รหัสผ่าน" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div>
* เป็นน้ำตาลไวยากรณ์ที่ทำให้ง่ายต่อการอ่านและเขียนคำแนะนำที่ต้องใช้เทมเพลตเพื่อแก้ไขเค้าโครง HTML ngfor, ngif และ ngswitch ทั้งหมดเพิ่มหรือลบ subtrees องค์ประกอบที่ห่อไว้ในแท็ก <materatle> ใช้ * คำนำหน้าไวยากรณ์เพื่อเพิกเฉย
<เทมเพลต [ngif] = "needpwd"> <div> <div> pwd </div> <อินพุตประเภท = "รหัสผ่าน" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </template>
1.6 ตัวแปรท้องถิ่น
ตัวแปรท้องถิ่นแสดงอยู่ในรูปแบบของ #XXX หากคุณใช้นิพจน์นี้กับองค์ประกอบ XXX สามารถใช้เพื่อแสดงองค์ประกอบ ตัวแปรท้องถิ่นสามารถใช้ในองค์ประกอบเดียวกันองค์ประกอบพี่น้องหรือองค์ประกอบลูกใด ๆ ดังที่แสดงด้านล่างคุณสามารถใช้ตัวแปรนี้เพื่อแสดงองค์ประกอบในโหนดพี่น้อง
<div *ng-if = "needpwd"> <div> pwd </div> <อินพุต #inpwd type = "รหัสผ่าน" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button = "click) =" show (inpwd.value)
1.7 การผูกเหตุการณ์
การเชื่อมโยงแอตทริบิวต์จะแสดงในรูปแบบของ () และผูกเมธอดของส่วนประกอบกับเหตุการณ์ที่เกี่ยวข้อง ตัวอย่างเช่นผูกฟังก์ชันการเปลี่ยนแปลงไปยังเหตุการณ์การเปลี่ยนแปลงและฟังก์ชั่นการเปลี่ยนแปลงจะถูกเรียกใช้เมื่อเหตุการณ์การเปลี่ยนแปลงเกิดขึ้น
<div> <div> อายุ </div> <อินพุต type = "text" (เปลี่ยน) = "เปลี่ยน ()" id = "อายุ" name = "อายุ" [placeholder] = "อายุ"> </div>
1.8 การผูกสองทาง
การเชื่อมโยงแบบสองทิศทางใช้วิธี [()] เพื่อแสดงว่าการผูกสองทางเป็นการรวมกันของการเชื่อมโยงแอตทริบิวต์และการเชื่อมโยงเหตุการณ์ การผูกสองทางที่ใช้กันมากที่สุดคือการใช้ [(ngmodel)] =” xxx” ในรูปแบบ เมื่อแก้ไขข้อมูลในแบบฟอร์มรายการข้อมูลที่ถูกผูกไว้จะได้รับการแก้ไข ดังที่แสดงด้านล่าง: เมื่อแบบฟอร์มเป็นอินพุตเพื่อแก้ไขตัวแปรทางเพศจะได้รับการแก้ไขแบบซิงโครนัส
<div> <div> เพศ </div> <อินพุต type = "text" [(ngmodel)] = "sex" id = "sex" name = "sex" [placeholder] = "sex"> </div>
ข้างต้นเป็นความรู้ที่เกี่ยวข้องของไวยากรณ์เทมเพลต Angular2 ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!