Компоненты Angular. Занятие №3-4

1.

ЗАНЯТИЕ №3-4
Компоненты
Angular
Практика по компонентам

2.

Разбор задания вместе
Социальная сеть.
Создать компоненты “Профиль пользователя”, “Публикация”, “Новостная лента”,
“Комментарий”.
Добавить возможность создавать новых пользователей, новые публикации,
добавлять комментарии, редактировать публикацию.

3.

Задания
1. Приложение “Заметки”. Возможность: создать заметку, просмотр всех заметок,
редактирование заметки. Каждая заметка должна быть в отдельном компоненте.
2. Расписание занятий. Расписание хранится в виде массива объектов. Каждый
отдельный объект представляет собой день недели. День недели включает в себя
массив из занятий и дату. Занятие расписать в виде отдельного компонента. В
занятии есть свойства название и время занятия. Добавить возможность
редактировать отдельное занятие.
3. Приложение “Расчёт стоимости смены покрытия полов”. В одном компоненте
вводить составляющие, во втором сумму и предпросмотр.

4.

Домашнее задание
Одно из вышеуказанных трёх, которые не делали на занятии.

5.

Код
import { Component } from "@angular/core";
@Component({
selector: "my-app-calc",
template: `<input type="range" [min]="min" [max]="max" [step]="step"
[(ngModel)]="val">
<p>Total: {{val}}</p>`,
styles: ["input {width: 200px}"]
})
export class CalcComponent{
min = 0;
max = 200;
step = 1;
val = 1;
}

6.

Создание компонентов автоматически
ng generate component <имя компонента>
Данная команда создаёт все необходимые файлы для нового
компонента.
Откройте файл .component.ts и обратите внимание на класс.

7.

Жизненный цикл компонента
Компонент, в процессе работы
проходит через разные этапы.
К этим этапам можно подцепиться,
используя разные методы.

8.

ngOnChanges
Вызывается до метода ngOnInit() при
начальной установке свойств, которые
связаны механизмом привязки, а также
при любой их переустановке или
изменении их значений.
Данный метод в качестве параметра
принимает объект класса SimpleChanges,
который содержит предыдущие и текущие
значения свойства.

9.

ngOnInit
Вызывается один раз после установки
свойств компонента, которые
участвуют в привязке.
Выполняет инициализацию компонента.

10.

ngDoCheck
Вызывается при каждой проверке
изменений свойств компонента
сразу после методов ngOnChanges
и ngOnInit

11.

ngAfterContentInit
Вызывается один раз после метода
ngDoCheck() после вставки
содержимого в представление
компонента кода html

12.

ngAfterContentChecked
Вызывается фреймворком Angular при
проверке изменений содержимого,
которое добавляется в представление
компонента. Вызывается после метода
ngAfterContentInit() и после каждого
последующего вызова метода
ngDoCheck().

13.

ngAfterViewInit
вызывается фреймворком Angular после
инициализации представления
компонента, а также представлений
дочерних компонентов. Вызывается
только один раз сразу после первого
вызова метода
ngAfterContentChecked()

14.

ngAfterViewChecked
Вызывается фреймворком Angular после
проверки на изменения в представлении
компонента, а также проверки
представлений дочерних компонентов.
Вызывается после первого вызова
метода ngAfterViewInit() и после
каждого последующего вызова
ngAfterContentChecked()

15.

ngOnDestroy
Вызывается перед тем, как
фреймворк Angular удалит
компонент.

16.

Интерфейсы
Эти методы определены в интерфейсах, имя которых записывается без
префикса ng.
Для того, чтобы использовать эти методы, необходимо
имплементировать соответствующие интерфейсы.
export class ChildComponent implements OnInit {
ngOnInit() {
}
}

17.

HTML и CSS в компонентах
Селектор :host представляет ссылку на сам элемент.
:host { width: 500px; border: 3px solid green}
<ng-content></ng-content> в коде html будет отображать содержимое
тега.

18.

Включение компонента в другой
Можно использовать код html другого компонента, если импортировать
класс компонента.

19.

Передача значений в дочерний компонент
Для передачи значения из одного компонента в другой, необходимо
использовать декоратор @Input
@Input() age;
@Input(‘max-age’) age;
Затем, вы можете передавать данные в компонент через директивы.

20.

Передача значений в дочерний компонент
@Component({
selector: 'bank-account',
template: ` Bank Name: {{bankName}}
})
class BankAccount {
@Input() bankName: string;
}
`
@Component({
selector: 'app',
template: `
<bank-account bankName="RBC"></bank-account>
`
})
class App {}

21.

Привязка к сеттеру
Для того, чтобы отследить возможные изменения, можно использовать
сеттеры.

22.

Пример
private _age: number;
@Input()set age(age:number) {
if (age > 100) {
this._age = 99;
} else if (age < 0){
this._age = 0;
} else {
this._age = age;
}
}
get age(){
return this._age;
}

23.

Взаимодействия через события
Для имитации событий есть специальный класс EventEmitter.
Для его использования его нужно импортировать.
import { … , EventEmitter } from '@angular/core';

24.

Создания события
С помощью декоратора @Output создаём событие
@Output() changed: EventEmitter<number> = new EventEmitter();
Событие затем можно запустить с помощью метода emit и передать в него данные.
changeAvg(event){
this.avg = event.target.value;
this.changed.emit(this.avg);

25.

Обработка события в родительском
компоненте
К дочернему компоненту подключаем новый обработчик события.
<app-child-component [total]="total" (changed)="recalc($event)"></appchild-component>
Важное замечание: в обработчиках стандартных событий DOM в метод
можно передавать объект $event. Он примет вид стандартного объекта
события.

26.

Практика
Страница авторизации.
1. Основной блок (родительский компонент).
2. Блок регистрации.
3. Блок входа.
Дополнительно: добавьте кнопку, вызывающую основной блок.

27.

Конец