Angular 2 ทำไมต้องเป็นเครื่องหมายดอกจัน (*)

ในเอกสารเชิงมุม 2 * และเทมเพลตเราทราบว่า * ngIf, * ngSwitch, * ngFor สามารถขยายเป็นแท็ก ng-template ได้ คำถามของฉันคือ:

ฉันคิดว่าการแปลngIfหรือngForไม่มี*ก็สามารถแปลและขยายเป็นแท็กเทมเพลตได้ด้วยเครื่องมือเชิงมุม

รหัสต่อไปนี้

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

ก็จะเหมือนกับ

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

แล้วทำไมต้องกังวลกับการออกแบบเครื่องหมายดอกจันสัญลักษณ์แปลก ๆ ( *) ในเชิงมุม 2?

ไวยากรณ์ดอกจันเป็นน้ำตาลทางไวยากรณ์สำหรับไวยากรณ์ของเทมเพลตที่มีลักษณะเป็นคำมากขึ้นซึ่งคำสั่งจะขยายไปถึงใต้ประทุนคุณมีอิสระที่จะใช้ตัวเลือกเหล่านี้

อ้างจากเอกสาร :

เครื่องหมายดอกจันคือ "syntactic sugar" ช่วยลดความซับซ้อนของ ngIf และ ngFor สำหรับทั้งผู้เขียนและผู้อ่าน ภายใต้ฝากระโปรง Angular จะแทนที่เวอร์ชันดอกจันด้วยรูปแบบที่ละเอียดกว่า

ตัวอย่าง ngIf สองตัวอย่างถัดไปมีประสิทธิภาพเหมือนกันและเราอาจเขียนในรูปแบบใดรูปแบบหนึ่ง:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Angular2 มีคำสั่งพิเศษ - คำสั่งโครงสร้าง

คำสั่งโครงสร้างขึ้นอยู่กับ<template>แท็ก

*ก่อนแอตทริบิวต์เลือกบ่งชี้ว่าคำสั่งโครงสร้างควรจะนำมาใช้แทนการสั่งแอตทริบิวต์ปกติหรือสถานที่ให้บริการที่มีผลผูกพัน Angular2 ขยายไวยากรณ์ภายในเป็น<template>แท็กโจ่งแจ้ง

เนื่องจากขั้นสุดท้ายยังมี<ng-container>องค์ประกอบที่สามารถใช้ในลักษณะเดียวกันกับ<template>แท็ก แต่สนับสนุนไวยากรณ์แบบสั้นทั่วไป นี่เป็นตัวอย่างที่จำเป็นเมื่อควรใช้คำสั่งเชิงโครงสร้างสองคำสั่งกับองค์ประกอบเดียวซึ่งไม่ได้รับการสนับสนุน

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Angular ถือว่าองค์ประกอบแม่แบบด้วยวิธีพิเศษ *ไวยากรณ์เป็นทางลัดที่ช่วยให้คุณหลีกเลี่ยงการเขียนทั้ง<template>องค์ประกอบ ให้ฉันแสดงวิธีการทำงาน

โดยใช้สิ่งนี้

*ngFor="let t of todos; let i=index"

แปลเป็น

template="ngFor: let t of todos; let i=index" 

ซึ่งจะถูกแปลงเป็นไฟล์

<template ngFor [ngForOf]="todos" .... ></template>

ยัง Agular ของคำสั่งโครงสร้างชอบngFor, ngIfฯลฯ นำหน้าด้วย*เพียงเพื่อให้แตกต่างจากคำสั่งที่กำหนดเองและส่วนประกอบอื่น ๆ

ดูเพิ่มเติมที่นี่

จากเอกสารเชิงมุม :

คำสั่งโครงสร้างรับผิดชอบโครงร่าง HTML พวกเขากำหนดรูปร่างหรือปรับรูปร่างโครงสร้างของ DOM โดยทั่วไปคือการเพิ่มลบหรือจัดการองค์ประกอบ

เช่นเดียวกับคำสั่งอื่น ๆ ที่คุณใช้คำสั่งโครงสร้างกับองค์ประกอบโฮสต์ จากนั้นคำสั่งจะทำทุกอย่างที่ควรจะทำกับองค์ประกอบโฮสต์นั้นและลูกหลานของมัน

คำสั่งโครงสร้างง่ายต่อการจดจำ เครื่องหมายดอกจัน (*) นำหน้าชื่อแอตทริบิวต์คำสั่งดังในตัวอย่างนี้

<p *ngIf="userInput">{{username}}</p>

บางครั้งคุณอาจต้องการ<a *ngIf="cond">ตัวอย่างเช่นเมื่อเป็นเพียงแท็กเดียว บางครั้งคุณอาจต้องการใส่ ngIf รอบ ๆ แท็กหลาย ๆ แท็กโดยไม่ต้องมีแท็กจริงเป็นตัวห่อซึ่งจะนำคุณไปสู่<template [ngIf]="cond">แท็ก เชิงมุมจะรู้ได้อย่างไรว่ามันควรจะแสดงเจ้าของคำสั่ง ngIf ใน html ผลลัพธ์สุดท้ายหรือไม่ ดังนั้นจึงเป็นสิ่งที่มากกว่าการทำให้โค้ดชัดเจนยิ่งขึ้น มันเป็นความแตกต่างที่จำเป็น