Шаблоны
Angular - клиентский фреймворк, поэтому основная его работа связана с представлением данных и обработкой шаблонов.
Логика и представление реализуются посредством компонентов, в которых экземпляр класса компонента (контроллер) взаимодействует с шаблоном (angular template) и задает поведение элемента.
Чтобы отобразить значения переменных компонента в шаблоне Angular, используются различные механизмы привязки данных:
интерполяция;
одностороннее связывание;
обработка событий;
двустороннее связывание.
Интерполяция
<p>Hello, {{name}}</p>
<p>{{'Hello,' + name}}</p>
<p>{{printGreeting()}}</p>
В первом случае между {{ и }} находится название свойства класса компонента, которое заменяется его значением.
Как видно из примеров, в Angular шаблонах также допускается использование простых арифметических операций, операций со строками (конкатенация), можно вызвать метод класса. Но нельзя использовать операторы ++, --, +=, -=, ключевое слово new.
Класс компонента может выглядеть так:
export class HelloWorldComponent {
name = 'World'
printGreeting(hero: Hero): string {
return 'Hello,' + this.name
}
}
Одностороннее связывание
Одностороннее связывание характеризуется движением данных в одном направлении, а именно из компонента в элемент DOM.
Свойство элемента DOM - это текущее значение атрибута элемента. Это может быть как стандартный HTML-атрибут, так и атрибут компонента или директивы (рассмотрено в одной из следующих глав).
<a [href]="homePageUrl">Home Page</a>
В данном случае значение из компонента передается свойству DOM href.
Механизм одностороннего связывания позволяет только устанавливать значения свойств DOM в Angular шаблоне, чтение недоступно. Также нельзя в HTML осуществлять вызов метода компонента, который не возвращает значение.
Методы, задающие определенное поведение элемента, могут вызываться при возникновении какого-либо события.
Название свойства элемента DOM должно быть заключено в квадратные скобки или иметь префикс bind-, иначе значением будет строка с названием свойства компонента.
Альтернативный синтаксис:
<a bind-href="homePageUrl">Home Page</a>
Стоит отметить, что если значением свойства компонента является строка, содержащая HTML-теги, то Angular позаботится об этом. В случае интерполяции эти теги будут выведены строкой, а при одностороннем связывании просто проигнорированы.
В Angular template существует специализированный вид одностороннего связывания. Он задает значения атрибутов, классов и стилей.
Атрибуты
Не все атрибуты HTML-разметки имеют соответствующие им свойства, например, colspan. В этом случае синтаксис будет такой:
<td [attr.colspan]="2 + 1">Table Cell Content</td>
Если попытаться сделать это классическим способом без attr., то Angular сообщит об этом.
Классы
Есть три способа задать в Angular CSS-класс элементу. Первый:
<p [class]="classes">Some text.</p>
Свойство classes - строка с названием классов, разделенных пробелами. В этом случае текущее значение атрибута class будет перезаписано новым.
Чтобы добавить класс уже к существующим, используется второй способ:
<p [class.red-text]="isRed">Some text.</p>
Здесь red-text - название класса, а isRed - переменная компонента типа boolean, значение которой определяет, будет ли в Angular шаблоне установлен класс или нет.
Третий способ задания в Angular CSS-класса - использование директивы NgClass, которая рассмотрена в главе "Директивы. Встроенные".
Стили
Определения строковых CSS-стилей происходит следующим образом:
<div [style.width.%]="isHalf ? 50 : 100">Some text.</p>
После style указывается определенный стиль для элемента Angular template, а затем, если это необходимо, указываются единицы измерения свойства. Выражением справа может быть как свойство компонента, так и условное выражение.
Обработка событий и двустороннее связывание рассмотрены далее.