Angular 2
Szablony
Szukaj…
Wprowadzenie
Szablony są bardzo podobne do szablonów w Angular 1, choć istnieje wiele małych zmian składniowych, które wyjaśniają, co się dzieje.
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.
