Sudut 2 mengapa tanda bintang (*)

Dalam dokumen angular 2, * dan template , kita tahu bahwa * ngIf, * ngSwitch, * ngFor dapat diperluas menjadi tag ng-template. Pertanyaanku adalah:

Saya pikir ngIfatau ngFortanpa *juga dapat diterjemahkan dan diperluas ke tag template dengan mesin sudut.

Kode berikut

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

akan sama dengan

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

Jadi mengapa repot-repot mendesain simbol aneh asterisk ( *) di sudut 2?

Sintaks asterisk adalah gula sintaks untuk sintaks template yang lebih bertele-tele yang direktif diperluas ke bawah tenda, Anda bebas menggunakan salah satu opsi ini.

Kutipan dari dokumen :

Tanda bintangnya adalah "gula sintaksis". Ini menyederhanakan ngIf dan ngFor untuk penulis dan pembaca. Di bawah kap, Angular menggantikan versi asterisk dengan bentuk yang lebih bertele-tele.

Dua contoh ngIf berikutnya secara efektif sama dan kita dapat menulis dengan salah satu gaya:

<!-- 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 menawarkan jenis arahan khusus - Arahan struktural

Arahan struktural didasarkan pada <template>tag.

The *sebelum atribut pemilih menunjukkan bahwa direktif struktural harus diterapkan bukan atribut direktif normal atau properti yang mengikat. Angular2 secara internal memperluas sintaks ke <template>tag eksplisit .

Sejak final, ada juga <ng-container>elemen yang dapat digunakan mirip dengan <template>tag tetapi mendukung sintaks singkat yang lebih umum. Ini misalnya diperlukan ketika dua arahan struktural harus diterapkan ke satu elemen, yang tidak didukung.

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

Angular memperlakukan elemen template dengan cara khusus. The *sintaks adalah cara pintas yang memungkinkan Anda membatalkan menulis seluruh <template>elemen. Mari saya tunjukkan cara kerjanya.

menggunakan ini

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

de-sugars menjadi

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

yang menghilangkan gula

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

juga arahan Struktural angular seperti ngFor, ngIf dll yang diawali dengan *hanya untuk membedakan dari arahan dan komponen kustom ini

lihat lebih lanjut di sini

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Dari dokumen Angular :

Arahan struktural bertanggung jawab atas tata letak HTML. Mereka membentuk atau membentuk kembali struktur DOM, biasanya dengan menambahkan, menghapus, atau memanipulasi elemen.

Seperti arahan lainnya, Anda menerapkan arahan struktural ke elemen host . Arahan kemudian melakukan apa pun yang seharusnya dilakukan dengan elemen host dan turunannya.

Arahan struktural mudah dikenali. Tanda bintang (*) mendahului nama atribut direktif seperti dalam contoh ini.

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

Terkadang Anda mungkin perlu <a *ngIf="cond">misalnya, jika hanya satu tag. terkadang Anda mungkin ingin meletakkan ngIf di sekitar beberapa tag tanpa memiliki tag nyata sebagai pembungkus yang mengarahkan Anda ke <template [ngIf]="cond">tag. bagaimana bisa angular tahu apakah itu harus membuat pemilik direktif ngIf di hasil akhir html atau tidak? jadi ini lebih dari sekadar membuat kode lebih jelas. itu perbedaan yang diperlukan.