จะใช้คำสั่งโครงสร้างใน Angular ได้อย่างไร?

บทความนี้จะพาคุณผ่านรูปแบบคำสั่งโครงสร้างใน Angular แนะนำว่าโครงสร้างคำสั่งคืออะไรและใช้งานอย่างไร ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!

การเข้าสู่ Front-end (vue) สู่หลักสูตรการเรียนรู้: เข้าสู่การเรียนรู้

ใน Angular มีคำสั่งสองประเภท คำสั่งแอตทริบิวต์แก้ไขลักษณะที่ปรากฏหรือพฤติกรรมขององค์ประกอบ DOM คำสั่งโครงสร้างเพิ่มหรือลบองค์ประกอบ DOM

คำสั่งเชิงโครงสร้างเป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดใน Angular แต่ก็มักถูกเข้าใจผิดบ่อยครั้ง

หากคุณสนใจที่จะเรียนรู้เกี่ยวกับคำสั่งโครงสร้าง โปรดอ่านต่อและค้นหาว่าคำสั่งเหล่านี้คืออะไร ใช้ทำอะไร และจะใช้อย่างไรในโครงการของคุณ [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

สิ่งที่คุณจะได้เรียนรู้

ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับรูปแบบคำสั่งเชิงโครงสร้าง Angular คุณจะรู้ว่ามันคืออะไรและใช้งานอย่างไร

หลังจากศึกษาบทความนี้แล้ว คุณจะเข้าใจคำแนะนำเหล่านี้ได้ดีขึ้นและนำไปใช้ในโครงการจริงได้

คำสั่งโครงสร้างเชิงมุมคืออะไร?

คำสั่งโครงสร้าง Angular เป็นคำสั่งที่สามารถเปลี่ยนโครงสร้างของ DOM ได้ คำแนะนำเหล่านี้สามารถ添加、移除或者替换元素คำสั่งโครงสร้างมีสัญลักษณ์ * หน้าชื่อ

ใน Angular มีคำสั่งที่มีโครงสร้างมาตรฐานอยู่สามคำสั่ง

• *ngIf - รวมเทมเพลตตามเงื่อนไขโดยยึดตามค่าบูลีนที่ส่งคืนโดยนิพจน์ (เช่น การแสดงผลเทมเพลตตามเงื่อนไข)

• *ngFor - วนซ้ำอาร์เรย์

• *ngSwitch - เรนเดอร์กราฟที่ตรงกันแต่ละรายการ

ด้านล่างนี้เป็นตัวอย่างของคำสั่งที่มีโครงสร้าง ไวยากรณ์มีลักษณะดังนี้:

 <องค์ประกอบ ng-if="เงื่อนไข"></องค์ประกอบ>

คำสั่งแบบมีเงื่อนไขจะต้องเป็น true หรือ false

 <div *ngIf="คนงาน" class="name">{{worker.name}}</div>

Angular สร้างองค์ประกอบ <ng-template> จากนั้นใช้คำสั่ง *ngIf ซึ่งจะแปลงเป็นการเชื่อมโยงคุณสมบัติภายในวงเล็บเหลี่ยม [] เช่น [ngIf] ส่วนที่เหลือของ <div> รวมถึงชื่อคลาส จะถูกแทรกลงใน <ng-template> ตัวอย่างเช่น:

 <ng-แม่แบบ [ngIf]="คนงาน">
<div class="name">{{worker.name}}</div>
</ng-แม่แบบ>

คำสั่งโครงสร้างเชิงมุมทำงานอย่างไร

หากต้องการใช้คำสั่งเชิงโครงสร้าง เราจำเป็นต้องเพิ่มองค์ประกอบที่มีคำสั่งในเทมเพลต HTML จากนั้นจึงเพิ่ม ลบ หรือแทนที่องค์ประกอบตามเงื่อนไขหรือสำนวนที่เรากำหนดไว้ในคำสั่ง

ตัวอย่างคำสั่งโครงสร้าง

มาเพิ่มโค้ด HTML ง่ายๆ กัน

เนื้อหาของไฟล์ app.component.html มีดังนี้:

 <div style="text-align:center">
<h1>
ยินดีต้อนรับ
</h1>
</div>
<h2> <app-ภาพประกอบ></app-ภาพประกอบ></h2>

วิธีใช้คำสั่ง *ngIf

เราใช้ *ngIf เพื่อกำหนดว่าจะแสดงหรือลบองค์ประกอบตามเงื่อนไข ngIf คล้ายกับ if-else มาก

คำสั่ง *ngIf จะลบองค์ประกอบ HTML เมื่อนิพจน์เป็น false เมื่อ true สำเนาขององค์ประกอบจะถูกเพิ่มใน DOM

รหัส *ngIf ที่สมบูรณ์มีดังนี้:

 <h1>
	<button (click)="toggleOn =!toggleOn">ภาพประกอบ ng-if</button>
</h1>
<div *ngIf="!toggleOn">
<h2>สวัสดี </h2>
<p>สวัสดีตอนเช้า คลิกปุ่มเพื่อดู</p>
</div>
<ชม.>
<p>วันนี้เป็นวันจันทร์ และนี่คือองค์ประกอบข้อความจำลองที่จะทำให้คุณรู้สึกดีขึ้น</p>
<p>ทำความเข้าใจคำสั่ง ngIf ด้วยส่วนคำสั่ง else</p>

วิธีใช้ *ngFor คำสั่ง

เราใช้คำสั่ง *ngFor เพื่อวนซ้ำอาร์เรย์ ตัวอย่างเช่น:

 <ul>

<li *ngFor="ปล่อยให้กระทะของคนงาน">{{ กระทะ }}</li>

</ul>

ไฟล์ TypeScript ส่วนประกอบของเรา:

 นำเข้า { ส่วนประกอบ OnInit } จาก '@ เชิงมุม/หลัก';

@ส่วนประกอบ({
ตัวเลือก: 'ภาพประกอบแอป',
templateUrl: './ illustration.component.html',
styleUrls: ['./ illustrations.component.css']
-
ส่งออกคลาส IllustrationsComponent ใช้ OnInit {
คนงาน: ใด ๆ = [

'คนงาน 1',

'คนงาน 2'

'คนงาน 3',

'คนงาน 4',

'คนงาน 5'

-

ตัวสร้าง () { }

ngOnInit(): เป็นโมฆะ {
-

-

วิธีใช้คำสั่ง *ngSwitch

เพิ่มผู้แปล: คำสั่งนี้มีประโยชน์มากในการพัฒนาจริง

เราใช้ ngSwitch เพื่อตัดสินใจว่าองค์ประกอบใดที่จะแสดงผลตามคำสั่งที่มีเงื่อนไขที่แตกต่างกัน คำสั่ง *ngSwitch นั้นคล้ายกับคำสั่ง switch ที่เราใช้มาก ตัวอย่างเช่น:

 <div [ngSwitch]="Myshopping">
<p *ngSwitchCase="'cups'">ถ้วย</p>
<p *ngSwitchCase="'veg'">ผัก</p>
<p *ngSwitchCase="'clothes'">กางเกงขายาว</p>
<p *ngSwitchDefault>การช็อปปิ้งของฉัน</p>
</div>

ใน typescript :

 ช้อปปิ้งของฉัน: string = '';

เรามีตัวแปร MyShopping ซึ่งมีค่าเริ่มต้นและใช้เพื่อแสดงองค์ประกอบเฉพาะในโมดูลที่ตรงตามเงื่อนไข

เมื่อค่าเงื่อนไขเป็น true องค์ประกอบที่เกี่ยวข้องจะแสดงผลใน DOM และองค์ประกอบที่เหลือจะถูกละเว้น หากไม่มีองค์ประกอบที่ตรงกัน องค์ประกอบ *ngSwitchDefault จะแสดงผลใน DOM

เมื่อใดที่เราต้องใช้คำสั่งโครงสร้างใน Angular?

หากคุณต้องการเพิ่มหรือลบองค์ประกอบออกจาก DOM คุณควรใช้คำสั่งโครงสร้าง แน่นอนว่าเรายังสามารถใช้เพื่อเปลี่ยนสไตล์ CSS ขององค์ประกอบหรือเพิ่มผู้ฟังเหตุการณ์ได้อีกด้วย คุณสามารถใช้มันเพื่อสร้างองค์ประกอบใหม่ที่ไม่เคยมีมาก่อนได้

กฎที่ดีที่สุดคือ: เมื่อเรากำลังคิดที่จะจัดการ DOM ก็ถึงเวลาที่จะใช้คำสั่งเชิงโครงสร้าง

สรุป

คำสั่งเชิงโครงสร้างเป็นส่วนสำคัญของ Angular และเราสามารถนำมาใช้ได้หลายวิธี

ฉันหวังว่าในบทความนี้ ผู้อ่านจะเข้าใจวิธีใช้คำแนะนำเหล่านี้ได้ดีขึ้นและเมื่อใดจึงควรใช้โหมดเหล่านี้