31
Июл
2019

Шаблоны

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

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

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

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

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

(untitled)


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

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

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

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


    export class HelloWorldComponent {
      name = 'World';
    
      printGreeting(hero: Hero): string{
      return 'Hello,' + this.name;
      }
    }
    

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

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

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


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

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

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

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

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

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


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

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

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

Атрибуты

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


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

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

Классы

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


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

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

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


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

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

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

Стили

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


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

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

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

Share

Тебе может это понравится...