Angular 2
Шаблоны

Вступление

Угловые 2 шаблона

ПРОСТОЙ ШАБЛОН

Начнем с очень простого шаблона, который показывает наше имя и нашу любимую вещь:

<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>

{}: ОКАЗАНИЕ

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

My name is {{name}}

Трубы, ранее известные как «Фильтры», преобразуют значение в новое значение, например, локализуют строку или преобразуют значение с плавающей запятой в представление валюты:

[]: ОБЯЗАТЕЛЬНЫЕ СВОЙСТВА

Чтобы разрешить и привязать переменную к компоненту, используйте синтаксис []. Если у нас есть this.currentVolume в нашем компоненте, мы передадим это через наш компонент и значения останутся в синхронизации:

<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS

(): ОБРАБОТКА СОБЫТИЙ Для прослушивания события на компоненте мы используем синтаксис ()

<my-component (click)="onClick($event)"></my-component>

[()]: ДВОЙНАЯ ДАННАЯ СВЯЗЬ

Чтобы сохранить привязку к актуальным данным пользователя и другим событиям, используйте синтаксис [()]. Подумайте об этом как о комбинации обработки события и привязки свойства:

<input [(ngModel)] = "myName"> Значение this.myName вашего компонента будет оставаться в синхронизации с входным значением.

* : THE ASTERISK

Указывает, что эта директива рассматривает этот компонент как шаблон и не будет рисовать его как есть. Например, ngFor берет наши и печатает его для каждого элемента в элементах, но он никогда не отображает нашу начальную, так как это шаблон:

<my-component *ngFor="#item of items">
</my-component>

Другие аналогичные директивы, которые работают с шаблонами, а не с отображаемыми компонентами, - это * ngIf и * ngSwitch.