Пойдем со мной, пока я перевариваю информацию из курса Удеми Полное руководство по Angular2 Максимилиана Шварцмюллера. Щелкните здесь, чтобы начать с начала. Эта серия статей предполагает наличие некоторых предварительных знаний об AngularJS, хотя, вероятно, это не критично для понимания всего этого. Это помогает мне писать об этих концепциях и создавать репозиторий систематизированных заметок для использования в будущем. Если вы сочтете это полезным или поймете какие-либо ошибки, дайте мне знать!
Что такое привязка данных?
Привязка данных - это взаимодействие шаблонов и бизнес-логики. Например:
<input type='text' [value]='message'>
Это односторонняя привязка, позволяющая установить value входного значения на то, что message находится в компоненте. Изменения ввода в представлении не повлияют на значение message.
Вот весь компонент:
import {Component} from '@angular/core';
@Component({
selector: 'app-another',
template: `
<input type="text" [value]="message"
style="width:800px;font-size:24px">
`,
styles: []
})
export class AnotherComponent {
message: string = 'A message from the component!';
}
Теперь мы можем делать всевозможные вещи со стороны логики, а затем передавать результаты этой логики в представление.
Помните, что эта работа с message: string = '' называется «типизацией» и является ключевым аспектом использования Typescript, на котором по умолчанию написан язык Angular.
Одностороннее связывание против двустороннего связывания
Привязки в Angular2 (в отличие от AngularJS) по умолчанию односторонние. Это заставляет наши программы работать быстрее. Если нам нужно использовать двустороннюю привязку (то есть мы хотим, чтобы изменения в представлении влияли на логику), мы должны написать:
<input type='text' [(value)]='message'>
По какой-то безумной причине это называют «бананом в коробке».
Строчная интерполяция
Один из простейших методов привязки данных - использование переменных для печати текста. Здесь мы можем увидеть оба варианта использования message на наш взгляд. Код для первого показан выше, если мы хотим просто вывести текст в наше представление, мы можем использовать {{message}}.
Привязка свойств
Мы также можем использовать привязку для установки свойств элементов HTML в представлениях наших компонентов. Например:
<p [ngClass]="{ green: true }">Some text.</p>
Жесткие скобки означают, что ngClass получит некоторую информацию от логики. Фигурные скобки означают, что код Javascript находится внутри. Теперь все, что нам нужно сделать, это определить наш green класс в таблице стилей, связанной с этим компонентом (или в глобальной таблице стилей), и наш текст станет зеленым.
ngStyle
Мы также можем использовать привязки для воздействия на встроенные стили:
<input type="text" [value]="message"
[ngStyle]="{ display: displayType() }" >
Теперь мы можем определить displayType в классе экспорта:
displayType() {
return 'in-line';
};
Конечно, если мы это сделаем, ничего не изменится. Но если мы изменим метод на возврат none, мы скроем поле ввода.
Привязка настраиваемых свойств
Встроенные привязки свойств хороши и все такое, но, очевидно, мы хотим иметь возможность создавать свои собственные. Мы делаем это, указав декоратор @Input() в нашей переменной message:
@Input() message: string = 'A message from the component!'
И добавил Input к нашему импорту в верхней части файла. Теперь, когда мы используем этот компонент в его родительском элементе, мы можем установить значение сообщения:
<app-another [message]="'I changed it!'"></app-another>
Обратите внимание на двойные кавычки. Это какая-то чушь Angular, с которой нам просто нужно разобраться.
Мы также можем добавить входные данные в декоратор @Component и убрать необходимость в декораторе @Input и импорте:
@Component({
[ ... ]
inputs: ['message']
})
Связывание событий
Наконец, нам нужно, чтобы наше приложение реагировало на события, а не только на переменные. Для этого воспользуемся привязкой к событию. Самый простой случай - это метод, который вызывается при нажатии кнопки:
# view
<button (click)='clickMethod()'>Click!</button>
# logic
clickMethod() {
alert('Clicked!')
}
Эмиссия событий
Нам также нужно, чтобы наше приложение реагировало на настраиваемые события. Действия, которые происходят в DOM, могут «испускать», когда они происходят, и мы можем создать функциональность, чтобы реагировать на это излучение.
В дочернем компоненте нам нужно импортировать Output и:
@Output() clicked = new EventEmitter<string>();
clickMethod() {
this.clicked.emit('It worked!');
}
(Как вы могли догадаться, мы также можем сократить это, включив выходные данные в outputs: ['outputName'], как мы это сделали с входами.)
А когда мы используем компонент в DOM, мы можем прикрепить настраиваемую привязку события:
<app-another (clicked)="onClicked($event)"></app-another>
Это позволит нашему родительскому компоненту «прослушивать» событие clicked. Он испускается clickMethod() в дочернем компоненте. $event - это встроенный объект, который будет хранить полезные данные, полученные от события (в данном случае это 'It worked!').
Теперь внутри компонента parent мы добавляем:
onClicked(value: string) {
alert(value);
}
Мне нужно было еще немного прочитать этот раздел после видео. Вот ссылка, которую я использовал.
Двусторонняя привязка данных
При двусторонней привязке, как и следовало ожидать, наши переменные будут отслеживать изменения и динамически обновлять представление. Вот он в действии в представлении:
<input type="text" [(ngModel)]="person.name"><br>
{{person.name}}
Это [(ngModel)] является подходящей синтаксической комбинацией привязки и прослушивания, потому что она выполняет и то, и другое. Теперь, когда person.name обновляется, вид изменится (помните строковую интерполяцию выше?)
В нашем компоненте нам нужно всего лишь:
person = {
name: 'Amber'
}
И это все, что касается раздела 2! Он переходит к хукам жизненного цикла и ViewChild() и ContentChild(), но на этом я остановлюсь. Следующий раздел представляет собой курсовой проект, так что это должно быть весело. Прошлая неделя полностью ускользнула от меня в плане изучения Angular, так что, надеюсь, я скоро вернусь.
