WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Узнать подробнее
Регистрация на сайте
Angular 5 databinding
Связывание данных (обмен данными между приложением и окном браузера) - это механизм связи между тем, что видят пользователи в окне браузера, и теми данными, которыми манипулирует приложение (компонент).
Достаточно описать связь между данными компонента (различными свойствами компонента) с одной стороны и данными, которые отображает в окне браузера HTML шаблон компонента, с другой.
Angular будет автоматически отслеживать эти изменения, отображая в окне браузера и меняя данные приложения.
Можно разделить способы обмена данными между приложением и его шаблоном на несколько категорий:
- передача данных от шаблона в компонент (Angular string interpolation, property binding, class binding, style bynding, ngStyle, ngClass)
- отслеживание событий, связвнных с DOM элементами шаблона (Angular Event Binding, $event)
- двусторонний обмен данными между шаблоном и компонентом (Angular two-way data binding, ngModel)
Интерполяция (Angular string interpolation)
{{expression}}
[target]="expression"
bind-target="expression"
[target]="expression"
bind-target="expression"
Обработка событий в окне
(target)="statement"
on-target="statement"
Можно использовать встроенный Angular объект - $event. Он автоматически привязывается к использующему его событию. Его свойства содержат свойства события и сыойства элемента, который это событие обработал
Пример:
import { Component} from '@angular/core';
@Component({
selector : 'app-comp2',
template : `
<h1>
$event properties - > to console
</h1>
<button class='btn' (click)='displEvntProp($event)'>Log $event properties</button>
`,
styles : ['']
})
export class Comp2Component {
constructor() {
}
displEvntProp(evnt){
console.log(evnt);
}
}
event filter
Template variable
#var1 = template reference variables in Angular
Эта переменная будет содержать ссылку на DOM элемент
<input type="text" (change)="true" #variable>
{{ variable.value }}
<my-component #variable [input]="'hello'"></my-component>
{{ variable.input }}
<form #variable="ngForm">
<!-- some more HTML ... -->
<button type="submit" [disabled]="variable.form.invalid">Submit!</button>
</form>
console.log($event) - вывести в консоль все его свойства, методы
Event bubbling - отслежтванте события всеми родительскими элементами в пррядке иерархии
$event.stopPropagation() - метод, который отменяет процесс event bubbling
Пример:
(String interpolation, property binding, custom variables)
<div style="text-align:center">
<h1>
Пример : {{ title }}!
</h1>
</div>
<hr>
<button id="myButton" #myBut1 type="submit" class="btn btn-default" [disabled]="buttonDisabled" [style.color]="buttonColor" (click)="myButClick($event)">
<i>{{buttonText}}</i>
</button>
<p style="color:blue" [innerHTML]="myBut1.innerText"></p>
<p style="color:red">{{buttonText}} </p>
<hr>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'data binding test';
buttonDisabled = true;
buttonText = "Ждите";
buttonColor = "red";
evntOut;
constructor (){
setTimeout(()=>{
this.buttonDisabled = false;
this.buttonText = "Вводите";
this.buttonColor = "green";
},5000);
}
myButClick (evnt){
this.buttonText = "Нажали уже!" ;
this.buttonDisabled = true;
this.evntOut = evnt;
console.log(evnt);
};
}
Переменные шаблона
Templaеу variable #var1 = template reference variables in Angular
Эта переменная будет содержать ссылку на DOM элемент
<input type="text" (change)="true" #variable>
{{ variable.value }}
<my-component #variable [input]="'hello'"></my-component>
{{ variable.input }}
<form #variable="ngForm">
<!-- some more HTML ... -->
<button type="submit" [disabled]="variable.form.invalid">Submit!</button>
</form>
Двусторонний обмен данными
Директива ngModel
Содержится в модуле
[(target)]="expression"
bindon-target="expression" <example-component [(message)]="title"></example-component> Name: <input type="text" [(ngModel)]="name" /> <div>{{name}}</div>
bindon-target="expression" <example-component [(message)]="title"></example-component> Name: <input type="text" [(ngModel)]="name" /> <div>{{name}}</div>
Импортировать в app.module.ts
import { FormsModule } from '@angular/forms'; // Importing forms module to this file
и
imports: [
BrowserModule,
FormsModule // Importing forms module to application module
],
Angular обеспечивает простой способ обработки событий, связанныз с элементами DOM.
Метод двусторонней привязки помогает поддерживать синхронизацию данных и управление вводом.
Двусторонняя привязка данных объединяет ввод и вывод в одном описании, используя директиву ngModel.
<input [(ngModel)]="name" >
Это эквивалентно:
<input [ngModel]="name" (ngModelChange)="name=$event">
Pipes
Последовательное поточное динамическое форматирование данных
BuiltIn pipes
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe.
Custom pipes