Обзор: привязка данных — это механизм привязки пользовательского интерфейса приложения или пользовательского интерфейса к модели. Используя привязку данных, пользователи смогут использовать браузер для управления элементами, представленными на веб-сайте.
Эта статья опубликована в сообществе HUAWEI CLOUD.Что такое привязка данных Angular и как она реализована? 》, оригинальный автор: Yuchuan.
Веб-разработка требует синхронизации данных между моделями и представлениями. Модели в основном содержат значения данных, а представления обрабатывают то, что видит пользователь. Поэтому, если вам интересно, как это происходит в Angular, вам поможет эта статья о привязке данных Angular.
Ниже перечислены темы, обсуждаемые здесь:
-
What is Data Binding?
-
Types of Data Binding in Angular
-
One-way Data Binding
o Interpolation
o PropertyBinding
o EventBinding
- Two-way Data Binding
Что такое привязка данных?
Привязка данных — это механизм привязки пользовательского интерфейса приложения или пользовательского интерфейса к модели. Используя привязку данных, пользователи смогут использовать браузер для управления элементами, представленными на веб-сайте. Поэтому всякий раз, когда какая-либо переменная изменяется, это конкретное изменение должно отражаться в объектной модели документа или DOM.
В Angular привязка данных определяет взаимодействие между компонентом и DOM. Привязка данных является частью всех версий Angular, начиная с AngularJS вплоть до последней версии Angular 9.
Типы привязки данных в Angular
Angular допускает одностороннюю и двустороннюю привязку данных.Односторонняя привязка данных— это простой тип привязки данных, при котором вы можете манипулировать представлениями через модели. Это означает, что изменения, внесенные в код Typescript, будут отражены в соответствующем HTML. В Angular односторонняя привязка данных достигается за счет:
-
Interpolation or String Interpolation
-
Property binding
-
Event binding
Двусторонняя привязка данных, с другой стороны, позволяет синхронизировать данные таким образом, что модель может использоваться для обновления представления, а представление может использоваться для обновления модели. Это означает, что ваше приложение сможет обмениваться информацией между классами компонентов и их шаблонами.
Односторонняя привязка данных
При односторонней привязке данные передаются только в одном направлении — от модели к представлению. Как упоминалось ранее, односторонняя привязка данных в Angular может быть трех типов, а именно интерполяция, привязка свойств и привязка событий.
Interpolation Binding
Интерполированные привязки используются для возврата вывода HTML из кода TypeScript (то есть из компонентов в представления). Здесь выражения шаблона указаны в двойных фигурных скобках. Интерполяция позволяет добавлять строки в текст между тегами HTML-элементов и внутри назначений атрибутов. Эти строки вычисляются с использованием выражений шаблона.
пример:
<h1>{{title}}</h1>
Learn <b> {{course}}
</b> with Edureka.
2 * 2 = {{2 * 2}}
<div><img src="{{image}}"></div>
Часть Typescript этого кода выглядит следующим образом:
export class AppComponent {
title = 'Databinding';
course ='Angular';
image = 'paste the url here'
}
выход:
Свойство компонента указывается между двумя фигурными скобками. Angular заменит свойство компонента строковым значением, связанным со свойством компонента. При необходимости его можно использовать в разных местах. Angular преобразует интерполяцию в привязку свойств.
Angular также позволяет настроить разделитель интерполяции и заменить две фигурные скобки чем-то по вашему выбору. Это можно сделать с помощью опции интерполяции в метаданных компонента.
выражение шаблона
Шаблонные выражения находятся внутри двух фигурных скобок и выдают значение. Angular выполнит выражение, а затем назначит конкретное выражение свойству цели привязки, например элементу HTML, компоненту или директиве.
Уведомление: 2 * 2 между скобками интерполяции является шаблонным выражением.
привязка свойств
В «привязке свойств» значения перетекают из свойств компонента в свойства целевого элемента. Поэтому привязку свойства нельзя использовать для чтения или извлечения данных из целевого элемента или для вызова методов, принадлежащих целевому элементу. События, вызванные элементами, можно подтвердить с помощью привязок событий, которые описаны далее в этой статье.
В общем, можно сказать, что значение свойства компонента будет установлено в свойство элемента с помощью привязки свойства.
пример:
<h1>Property binding</h1>
<div><img [src]="image"></div>
В приведенном выше примере элемент изображенияsrcСвойство привязано к свойству изображения компонента.
Property binding and Interpolation
Если вы заметили, вы можете видеть, что интерполяция и привязка свойств взаимозаменяемы. Взгляните на приведенный ниже пример пары:
<h2>Interpolation</h2>
<div><img src="{{image}}"></div>
<h2>Property binding</h2>
<div><img [src]="image"></div>
Обратите внимание, что когда вам нужно установить для свойства элемента нестроковое значение данных, вы должны использовать привязку свойства вместоInterpolation.
привязка события
Используя функцию привязки событий, вы можете прослушивать определенные события, такие как движение мыши, нажатие клавиши, щелчок и т. д. В Angular привязка события достигается путем указания имени целевого события в обычных квадратных скобках слева от знака равенства (=) и операторов шаблона в закрывающих кавычках ("").
пример:
<div>
<button (click)="goBack()">Go back</button>
</div>
В приведенном выше примере «щелчок» — это имя целевого события, а «goBack()» — оператор шаблона.
выход:
Всякий раз, когда происходит привязка события, Angular устанавливает обработчик события для целевого события. Оператор шаблона выполняется обработчиком при возникновении этого конкретного события. Как правило, приемники включают операторы шаблона, которые выполняют действия в ответ на события. Здесь привязка используется для передачи информации о событии. Эти значения данных информации включают в себя строки событий, объекты и т. д.
Two-way Binding
Angular допускает двустороннюю привязку данных, что позволит вашему приложению обмениваться данными в обоих направлениях, от компонентов к шаблонам и наоборот. Это гарантирует, что модели и представления, присутствующие в приложении, всегда синхронизированы. Двусторонняя привязка данных будет делать две вещи: настройку свойств элемента и прослушивание событий изменения элемента.
Синтаксис двусторонней привязки — [()}. Как видите, это комбинация синтаксиса привязки свойств (то есть [] и синтаксиса привязки событий()). Согласно Angular, этот синтаксис похож на «бананы в коробке».
пример:
<label ><b>Name:</b>
<input [(ngModel)]="course.name" placeholder="name"/>
</label>
Когда вы выполните этот код, вы увидите, что изменения в модели или представлении приведут к изменениям в соответствующем представлении и модели. Взгляните на изображение ниже, которое изменяет имя класса с "Python" на "Python":
Нажмите «Подписаться», чтобы впервые узнать о новых технологиях HUAWEI CLOUD~