Привет друзья, сегодня я хочу, чтобы мы рассмотрели очень интересную и важную часть программирования приложений angular. Это при привязке.
Привязка означает определение связи между угловым представлением (html) и компонентом (в данном случае машинописным кодом). Послушайте, данные в большинстве случаев исходят от компонента и попадают в представление. Редко вы будете жестко кодировать данные в своем представлении, если вы серьезный программист.
Зная, что такое связывание, я разделю их на следующие категории для простоты понимания:
Привязка данных
Привязка стиля и привязка класса
Привязка события
Привязка данных
Привязка данных — это то, как данные перемещаются из компонента в представление и, возможно, обратно. Преднамеренное использование «возможно», потому что привязка данных может быть:
В одну сторону или
Двусторонняя привязка.
Для односторонней привязки данных ваше предположение точно мое. Данные перемещаются из компонента в представление и никогда не возвращаются обратно.
Двусторонняя привязка данных включает туда и обратно. Данные перемещаются из компонента в представление и из представления в компонент при наличии изменений. Предположим, вы редактировали форму, например. Вам нужно будет обновить модель. Это способ достичь этого.
Теперь, как мы достигнем вышеизложенного?
Для односторонней привязки данных мы используем два метода:
Интерполяция строк
Привязка свойства
Посмотрите на следующий фрагмент кода:
Синим цветом обозначена односторонняя привязка интерполяции строк. Он использует двойные фигурные скобки {{}}. Между фигурными скобками находится переменная. Переменная в компоненте. Поэтому всякий раз, когда этот компонент загружается, представление ссылается на переменные из компонента для выбора значений. Он как бы сообщает компоненту: «Привет, друг, у меня здесь два посетителя. Какие подарки они несут?» затем компонент отвечает значениями переменных.
Зацикленный темно-бордовый цвет является обязательным свойством. В этом случае я выполняю привязку стилей класса, о которой я вскоре расскажу. Все, что я хочу, чтобы вы поняли, это то, что привязка свойств выполняется не к строкам. И делается это с помощью квадратных скобок [].
Привязка стилей и классов
Как вы можете догадаться, это используется, когда вы хотите добиться разных стилей представления в зависимости от определенных условий. Так что, например, если логическое значение истинно, вы применяете красный цвет, иначе зеленый.
Вернемся к нашему фрагменту кода:
Проверьте, что обведено красным. Это class.headeritems, окруженный фигурными скобками привязки свойства. Это привязка класса. Он состоит из двух частей:
ключевое слово "класс"
.headeritems, который в данном случае является классом css, определяется в файле css.
Таким образом, вы просто создаете стиль класса в своем файле css или в метаданных компонента и вызываете его в компоненте с префиксом ключевого слова class.
Кроме того, после следует выражение, которое полностью равно class.headeritems=”applyclass”. applyclass — это логическое значение в компоненте, которое оценивается, чтобы определить, следует ли применять определенный стиль класса.
Привязка событий
В этом мы говорим о событиях DOM. Например, когда нажимается кнопка или пользователь печатает. Мы отправляем эту форму из представления компоненту для любой необходимой обработки.
Привязка событий осуществляется с помощью фигурных скобок (). В этом случае я вызываю метод
getUserInput(ввод: любой) {
console.log(input.value);
}
И передать ссылку на шаблон. Затем выберите значение из ссылки на шаблон и запишите его в консоль. См. фрагмент ниже:
Проверьте зацикленный красный (щелчок), который является событием щелчка.
Двусторонняя привязка
Предположим, вы хотите просматривать свои данные, например, при вводе текста в текстовое поле. Таким образом, вы должны выполнить двустороннюю привязку данных. Где изменения, которые вы делаете в представлении, должны отражаться в компоненте, а затем возвращаться в представление. Двусторонняя привязка данных достигается за счет использования og ngModel. Директива окружена парой квадратных и круглых скобок как [(ngModel)]. Таким образом, это в основном комбинация привязки свойства и события.
