Angular 2
Szablony

Wprowadzenie

Szablony Angular 2

PROSTY SZABLON

Zacznijmy od bardzo prostego szablonu, który pokazuje naszą nazwę i naszą ulubioną rzecz:

<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>

{}: Renderowanie

Aby wyrenderować wartość, możemy użyć standardowej składni podwójnie kręconej:

My name is {{name}}

Rury, wcześniej znane jako „Filtry”, przekształcają wartość w nową wartość, na przykład lokalizują ciąg lub przekształcają wartość zmiennoprzecinkową w reprezentację waluty:

[]: WIĄŻĄCE WŁAŚCIWOŚCI

Aby rozwiązać i powiązać zmienną ze składnikiem, użyj składni []. Jeśli mamy this.currentVolume w naszym komponencie, przekażemy to naszemu komponentowi, a wartości pozostaną zsynchronizowane:

<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS

(): OBSŁUGA ZDARZEŃ Aby nasłuchiwać zdarzenia w komponencie, używamy składni ()

<my-component (click)="onClick($event)"></my-component>

[()]: WIĄZANIE DANYCH DROGOWYCH

Aby aktualizować powiązanie na podstawie danych wprowadzonych przez użytkownika i innych zdarzeń, użyj składni [()]. Potraktuj to jako połączenie obsługi zdarzenia i powiązania właściwości:

<input [(ngModel)] = "myName"> Wartość this.myName Twojego komponentu pozostanie w synchronizacji z wartością wejściową.

* : ASTERISK

Wskazuje, że niniejsza dyrektywa traktuje ten komponent jako szablon i nie rysuje go takim, jaki jest. Na przykład ngFor usuwa nasze i stempluje je dla każdego elementu w przedmiotach, ale nigdy nie renderuje naszego początkowego, ponieważ jest to szablon:

<my-component *ngFor="#item of items">
</my-component>

Inne podobne dyrektywy, które działają na szablonach, a nie na renderowanych komponentach, to * ngIf i * ngSwitch.