Açısal 2 neden yıldız işareti (*)

Açısal 2 belgesinde * ve şablonda , * ngIf, * ngSwitch, * ngFor'un ng-şablon etiketine genişletilebileceğini biliyoruz. Sorum şu:

Bence açısal motor ile ngIfya da ngForolmadan *çevrilebilir ve şablon etiketine genişletilebilir.

Aşağıdaki kod

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

ile aynı olacaktır

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

Öyleyse neden *açısal 2'de garip bir sembol yıldız işareti ( ) tasarlamaya çalışalım ?

Yıldız işareti sözdizimi, yönergenin kapsam altına genişlediği daha sözcüklü şablon sözdizimi için sözdizimsel bir şekerdir, bu seçeneklerden herhangi birini kullanmakta özgürsünüz.

Dokümanlardan alıntı :

Yıldız işareti "sözdizimsel şeker" dir. Hem yazar hem de okuyucu için ngIf ve ngFor'u basitleştirir. Başlık altında, Angular, yıldız işaretini daha ayrıntılı bir formla değiştirir.

Sonraki iki ngIf örneği etkili bir şekilde aynıdır ve her iki tarzda da yazabiliriz:

<!-- 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 özel bir tür direktif sunar - Yapısal direktifler

Yapısal yönergeler <template>etiketi temel alır .

*Öznitelik önce seçici yapısal bir yönerge bir özniteliktir yönergesi veya özellik bağlanabilen uygulanması gerektiğini gösterir. Angular2, sözdizimini dahili olarak açık bir <template>etikete genişletir .

Sondan beri <ng-container>, <template>etikete benzer şekilde kullanılabilen, ancak daha yaygın olan kısa el sözdizimini destekleyen öğe de vardır . Bu, örneğin, iki yapısal direktifin desteklenmeyen tek bir öğeye uygulanması gerektiğinde gereklidir.

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

Angular, şablon öğelerini özel bir şekilde ele alır. *Sözdizimi bütün yazılmasını önlemek sağlayan bir kısa yoldur <template>elemanı. Nasıl çalıştığını size göstereyim.

bunu kullanarak

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

çevirir

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

daha sonra dönüştürülür

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

ayrıca Agular'ın Yapısal yönergeleri gibi ngFor, ngIfvb. *Sadece onları diğer özel yönergelerden ve bileşenlerden ayırmak için ön eklenmiştir.

burada daha fazlasını görün

Gönderen Açısal docs :

Yapısal yönergeler HTML düzeninden sorumludur. Genellikle öğeler ekleyerek, kaldırarak veya işleyerek DOM'un yapısını şekillendirir veya yeniden şekillendirirler.

Diğer yönergelerde olduğu gibi, bir barındırma öğesine yapısal bir yönerge uygularsınız . Direktif daha sonra bu host element ve onun soyundan gelenlerle ne yapması gerekiyorsa onu yapar.

Yapısal yönergelerin tanınması kolaydır. Bu örnekte olduğu gibi bir yıldız işareti (*) yönerge öznitelik adından önce gelir.

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

Bazen <a *ngIf="cond">, örneğin yalnızca bir etiket olduğunda ihtiyacınız olabilir . bazen ngIf'i, sizi etiketlemeye götüren bir sarmalayıcı olarak gerçek bir etiket olmadan birden fazla etiketin etrafına yerleştirmek isteyebilirsiniz <template [ngIf]="cond">. Angular, ngIf yönergesinin sahibini nihai sonuçta html olarak göstermesi gerekip gerekmediğini nasıl bilebilir? bu yüzden kodu daha net hale getirmekten daha fazlası. bu gerekli bir fark.