Перейти к содержанию

Шаблоны

Angular — клиентский фреймворк, поэтому основная его работа связана с представлением данных и обработкой шаблонов.

Логика и представление реализуются посредством компонентов, в которых экземпляр класса компонента (контроллер) взаимодействует с шаблоном (angular template) и задает поведение элемента.

Чтобы отобразить значения переменных компонента в шаблоне Angular, используются различные механизмы привязки данных:

  • интерполяция;
  • одностороннее связывание;
  • обработка событий;
  • двустороннее связывание.

Интерполяция

1
2
3
<p>Hello, {{name}}</p>
<p>{{'Hello,' + name}}</p>
<p>{{printGreeting()}}</p>

В первом случае между {{ и }} находится название свойства класса компонента, которое заменяется его значением.

Как видно из примеров, в Angular шаблонах также допускается использование простых арифметических операций, операций со строками (конкатенация), можно вызвать метод класса. Но нельзя использовать операторы ++, --, +=, -=, ключевое слово new.

Класс компонента может выглядеть так:

1
2
3
4
5
6
7
export class HelloWorldComponent {
    name = 'World';

    printGreeting(hero: Hero): string {
        return 'Hello,' + this.name;
    }
}

Одностороннее связывание

Одностороннее связывание характеризуется движением данных в одном направлении, а именно из компонента в элемент DOM.

Свойство элемента DOM — это текущее значение атрибута элемента. Это может быть как стандартный HTML-атрибут, так и атрибут компонента или директивы (рассмотрено в одной из следующих глав).

1
<a [href]="homePageUrl">Home Page</a>

В данном случае значение из компонента передается свойству DOM href.

Механизм одностороннего связывания позволяет только устанавливать значения свойств DOM в Angular шаблоне, чтение недоступно. Также нельзя в HTML осуществлять вызов метода компонента, который не возвращает значение.

Методы, задающие определенное поведение элемента, могут вызываться при возникновении какого-либо события.

Название свойства элемента DOM должно быть заключено в квадратные скобки или иметь префикс bind-, иначе значением будет строка с названием свойства компонента.

Альтернативный синтаксис:

1
<a bind-href="homePageUrl">Home Page</a>

Стоит отметить, что если значением свойства компонента является строка, содержащая HTML-теги, то Angular позаботится об этом. В случае интерполяции эти теги будут выведены строкой, а при одностороннем связывании просто проигнорированы.

В Angular template существует специализированный вид одностороннего связывания. Он задает значения атрибутов, классов и стилей.

Атрибуты

Не все атрибуты HTML-разметки имеют соответствующие им свойства, например, colspan. В этом случае синтаксис будет такой:

1
<td [attr.colspan]="2 + 1">Table Cell Content</td>

Если попытаться сделать это классическим способом без attr., то Angular сообщит об этом.

Классы

Есть три способа задать в Angular CSS-класс элементу. Первый:

1
<p [class]="classes">Some text.</p>

Свойство classes — строка с названием классов, разделенных пробелами. В этом случае текущее значение атрибута class будет перезаписано новым.

Чтобы добавить класс уже к существующим, используется второй способ:

1
<p [class.red-text]="isRed">Some text.</p>

Здесь red-text — название класса, а isRed — переменная компонента типа boolean, значение которой определяет, будет ли в Angular шаблоне установлен класс или нет.

Третий способ задания в Angular CSS-класса — использование директивы NgClass, которая рассмотрена в главе "Директивы. Встроенные".

Стили

Определения строковых CSS-стилей происходит следующим образом:

1
    <div [style.width.%]="isHalf ? 50 : 100">Some text.</p>

После style указывается определенный стиль для элемента Angular template, а затем, если это необходимо, указываются единицы измерения свойства. Выражением справа может быть как свойство компонента, так и условное выражение.

Обработка событий и двустороннее связывание рассмотрены далее.

Ссылки

Комментарии