Szablony w Angularze

W Angular szablon to schemat fragmentu interfejsu użytkownika (UI). Szablony są pisane w HTML, a specjalna składnia może być używana w szablonie, aby budować na wielu funkcjach Angulara.

Angular rozszerza składnię HTML w szablonach o dodatkowe funkcje.
Na przykład składnia powiązań danych Angulara pomaga dynamicznie ustawiać właściwości Document Object Model (DOM).

Prawie cała składnia HTML jest poprawną składnią szablonu. Ponieważ jednak szablon Angular jest tylko fragmentem interfejsu użytkownika, nie zawiera elementów takich jak <html>, <body> czy <base>.

Uwaga: – Aby wyeliminować ryzyko ataków polegających na wstrzyknięciu skryptu, Angular nie obsługuje elementu <script> w szablonach. Angular ignoruje tag <script> i wysyła ostrzeżenie do konsoli przeglądarki. Aby uzyskać więcej informacji, zobacz stronę Bezpieczeństwo.

Wyświetlanie wartości z interpolacją

Interpolacja odnosi się do osadzania wyrażeń w zaznaczonym tekście. Domyślnie interpolacja używa podwójnych nawiasów klamrowych {{ i }} jako ograniczników.

Przykład:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Przykład:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

Instrukcje szablonów to metody lub właściwości, których można używać w kodzie HTML do reagowania na zdarzenia użytkownika. Dzięki szablonowym oświadczeniom Twoja aplikacja może angażować użytkowników poprzez działania, takie jak wyświetlanie zawartości dynamicznej lub przesyłanie formularzy.

Przykład:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Podobnie jak wyrażenia szablonowe, instrukcje szablonów używają języka, który wygląda jak JavaScript. Jednak parser dla instrukcji szablonów różni się od parsera dla wyrażeń szablonowych. Ponadto parser instrukcji szablonów obsługuje zarówno podstawowe przypisania (=), jak i łączenie wyrażeń za pomocą średników (;).

Następująca składnia wyrażenia JavaScript i szablonu jest niedozwolona:

1. Nowy
2. Operatory inkrementacji i dekrementacji, ++ i —
3. Przypisania operatorów, takie jak += i -=
4. Operatory bitowe, takie jak | oraz &
5. Operator rur