Этот блог в первую очередь посвящен тому, что такое привязка данных и ее типам: –
- Интерполяция строк
- Привязка свойств
- Привязка событий
- Двусторонняя привязка данных
Привязка данных — одна из самых мощных и важных функций языка разработки программного обеспечения. Это позволяет нам определить связь между компонентом и представлением. Таким образом, мы можем сказать, что привязка данных передается от компонента к представлению и от представления к компоненту.
1: Интерполяция.Это тип односторонней привязки данных. Текст между фигурными скобками часто является именем свойства компонента. Angular замените это имя строковым значением соответствующего свойства компонента. Синтаксис интерполяции строк заключается в использовании двойных фигурных скобок {{ и }}.
Теперь откройте файл binding.component.html и напишите свой код для интерполяции строк.
<h1>Data Binding in Angular</h1><br> <h2>{{stringInterpolation}}</h2>
Для достижения желаемого метода привязки данных обновите следующий код в файле binding.component.ts.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-binding', templateUrl: './binding.component.html', styleUrls: ['./binding.component.css'] }) export class BindingComponent implements OnInit { constructor() { } stringInterpolation = 'Learning string interpolation'; ngOnInit() { } }
Вывод:
2: PropertyBinding: привязка свойства позволяет нам привязать представление выражения шаблона. Привязка свойства простыми словами определяется как обновление значения определенной переменной в компоненте (модели) и отображение его в представлении (уровень представления).
Это односторонний механизм, который позволяет вам изменять значение в любое время, но только на уровне компонента.
binding.component.html
<h1>PropertyBinding</h1> <img [src]="imagePath" class="image-adjustment"/><br>
Примечание. Вы можете выполнить привязку свойства, используя квадратные скобки для тега src, а также заключайте значение компонента в кавычки.
binding.component.ts
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-binding', templateUrl: './binding.component.html', styleUrls: ['./binding.component.css'] })
export class BindingComponent implements OnInit { constructor() { } imagePath: string = 'assets/images/Databinding.png'; ngOnInit() {} } }
Хотя оба делают одно и то же, так в чем же разница между связыванием свойств и интерполяцией?
Для лучшего понимания обратитесь к приведенному ниже примеру:
Теперь мы берем одну кнопку, и значение кнопки исходит из класса компонента, который отключен с помощью свойства disabled.
binding.component.html
<h1>Data Binding in Angular</h1><br>
<h1>Interpolation</h1> <img src = {{imagePath}} class="image-adjustment"/> <br> <button disabled={{currentValue}}>CLICK ME</button>
Теперь то же самое будет делаться с привязкой свойств. В Property Binding атрибут [disable] мы должны определить в квадратных скобках, а в кавычках можно указать имя переменной.
<h1>PropertyBinding</h1> <img [src]="imagePath" class="image-adjustment"/><br> <button [disabled]="currentValue" (click)="onClick()">CLICKME</button>
binding.component.ts
export class BindingComponent implements OnInit { constructor() { } imagePath: string = 'assets/images/Databinding.png'; currentValue: boolean = true; ngOnInit() {} }
Вывод:
Итак, теперь вы можете проверить, что обе кнопки сейчас отключены, но сейчас, если мы изменим значение переменной на false, мы увидим, что кнопка в интерполяции строк по-прежнему отключена, в то время как в привязке свойств она теперь включена.
Пример:
export class BindingComponent implements OnInit {
constructor() { } imagePath: string = 'assets/images/Databinding.png'; currentValue: boolean = false; ngOnInit() { } }
Вывод:
Теперь мы видим, что кнопка в интерполяции строк по-прежнему отключена, а в привязке свойств теперь включена.
Примечание. Поэтому там, где вам нужно использовать строковое выражение, используйте интерполяцию, а когда вы имеете дело с нестроковым выражением, используйте привязку свойства.
3: Привязка события. Привязка события простыми словами определяется как обновление/отправка значения/информации определенной переменной из уровня представления (представления) в компонент (модель). Например: нажатие кнопки.
binding.component.html
<h1 Event Binding></h1> <h1>{{title}}</h1> <button (click)="changeMyTitle()">Title is changed on click of this button.</button>
binding.component.ts
export class BindingComponent implements OnInit { constructor() { } title = 'Learning string interpolation'; ngOnInit() { } changeMyTitle() { this.title = 'Learning Event Binding'; } }
Вывод:
Теперь пользователь будет выполнять любое действие из шаблона, и в соответствии с этим этот метод будет вызываться и выполняться. Кроме того, не только click(), вы также можете использовать другие события, такие как отправка, ввод с помощью мыши, события размытия и т. д.
4: Двусторонняя привязка данных. Двусторонняя привязка данных представляет собой комбинацию привязки свойств и событий и представляет собой непрерывную синхронизацию данных из представления с компонентом и компонента с представлением. то есть изменения, внесенные в данные компонента, должны синхронизироваться с представлением и должны немедленно обновить модель в соответствующий компонент с данными представления.
Двусторонняя привязка данных в основном используется в формах ввода данных, где пользователь изменяет представление и вносит изменения в модель с данными представления и наоборот. Итак, как мы знаем, angular использует комбинацию привязки свойств и привязки событий для реализации двусторонней привязки данных с помощью директивы ngModel.
NgModel не является частью библиотеки углового кода, он определен в библиотеке модулей форм, поэтому вам нужно импортировать библиотеку FormsModule, поэтому вам нужно импортировать FormsModule в app.module.ts, и он исходит из библиотеки, т.е. угловых форм, и теперь мы можно использовать директиву ngModel для реализации двусторонней привязки данных.
binding.component.html
<h1>Data Binding in Angular</h1> <h2>Learning Two-Way DataBinding</h2> <input type = "text" [(ngModel)]="userName"/> <br> <h4>Welcome: {{userName}}</h4>
Вывод:
Спасибо за чтение!!!
Первоначально опубликовано на сайте blog.knoldus.com 24 сентября 2018 г.
