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

Август 11, 2022

Главная
Информатика
Компоненты Angular. Занятие №3-4

Содержание

2. Социальная сеть. Создать компоненты “Профиль пользователя”, “Публикация”, “Новостная лента”, “Комментарий”. Добавить возможность создавать новых пользователей, новые
3. 1. Приложение “Заметки”. Возможность: создать заметку, просмотр всех заметок, редактирование заметки. Каждая заметка должна быть в
4. Одно из вышеуказанных трёх, которые не делали на занятии.
5. import { Component } from "@angular/core"; @Component({ selector: "my-app-calc", template: ` Total: {{val}} `, styles: ["input
6. ng generate component Данная команда создаёт все необходимые файлы для нового компонента. Откройте файл .component.ts и
7. Компонент, в процессе работы проходит через разные этапы. К этим этапам можно подцепиться, используя разные методы.
8. Вызывается до метода ngOnInit() при начальной установке свойств, которые связаны механизмом привязки, а также при любой
9. Вызывается один раз после установки свойств компонента, которые участвуют в привязке. Выполняет инициализацию компонента.
10. Вызывается при каждой проверке изменений свойств компонента сразу после методов ngOnChanges и ngOnInit
11. Вызывается один раз после метода ngDoCheck() после вставки содержимого в представление компонента кода html
12. Вызывается фреймворком Angular при проверке изменений содержимого, которое добавляется в представление компонента. Вызывается после метода ngAfterContentInit()
13. вызывается фреймворком Angular после инициализации представления компонента, а также представлений дочерних компонентов. Вызывается только один раз
14. Вызывается фреймворком Angular после проверки на изменения в представлении компонента, а также проверки представлений дочерних компонентов.
15. Вызывается перед тем, как фреймворк Angular удалит компонент.
16. Эти методы определены в интерфейсах, имя которых записывается без префикса ng. Для того, чтобы использовать эти
17. Селектор :host представляет ссылку на сам элемент. :host { width: 500px; border: 3px solid green} в
18. Можно использовать код html другого компонента, если импортировать класс компонента.
19. Для передачи значения из одного компонента в другой, необходимо использовать декоратор @Input @Input() age; @Input(‘max-age’) age;
20. @Component({ selector: 'bank-account', template: ` Bank Name: {{bankName}} ` }) class BankAccount { @Input() bankName: string;
21. Для того, чтобы отследить возможные изменения, можно использовать сеттеры.
22. private _age: number; @Input()set age(age:number) { if (age > 100) { this._age = 99; } else
23. Для имитации событий есть специальный класс EventEmitter. Для его использования его нужно импортировать. import { …
24. С помощью декоратора @Output создаём событие @Output() changed: EventEmitter = new EventEmitter(); Событие затем можно запустить
25. К дочернему компоненту подключаем новый обработчик события. Важное замечание: в обработчиках стандартных событий DOM в метод
26. Страница авторизации. 1. Основной блок (родительский компонент). 2. Блок регистрации. 3. Блок входа. Дополнительно: добавьте кнопку,
28. Скачать презентацию

Слайд 2

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

новых пользователей, новые публикации, добавлять комментарии, редактировать публикацию.

Слайд 3

1. Приложение “Заметки”. Возможность: создать заметку, просмотр всех заметок, редактирование заметки.

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

Слайд 4

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

Слайд 5

import { Component } from "@angular/core";
@Component({
selector: "my-app-calc",
template: `

[min]="min" [max]="max" [step]="step" [(ngModel)]="val">

Total: {{val}}

`,
styles: ["input {width: 200px}"]
})
export class CalcComponent{
min = 0;
max = 200;
step = 1;
val = 1;
}

Слайд 6

ng generate component <имя компонента>
Данная команда создаёт все необходимые файлы для

нового компонента.
Откройте файл .component.ts и обратите внимание на класс.

Слайд 7

Компонент, в процессе работы проходит через разные этапы.
К этим этапам

можно подцепиться, используя разные методы.

Слайд 8

Вызывается до метода ngOnInit() при начальной установке свойств, которые связаны механизмом

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

Слайд 9

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

Выполняет инициализацию компонента.

Слайд 10

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

и ngOnInit

Слайд 11

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

компонента кода html

Слайд 12

Вызывается фреймворком Angular при проверке изменений содержимого, которое добавляется в представление

компонента. Вызывается после метода ngAfterContentInit() и после каждого последующего вызова метода ngDoCheck().

Слайд 13

вызывается фреймворком Angular после инициализации представления компонента, а также представлений дочерних

компонентов. Вызывается только один раз сразу после первого вызова метода ngAfterContentChecked()

Слайд 14

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

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

Слайд 15

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

Слайд 16

Эти методы определены в интерфейсах, имя которых записывается без префикса ng.

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

Слайд 17

Селектор :host представляет ссылку на сам элемент.
:host { width: 500px; border:

3px solid green}
в коде 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: `

`
})
class App {}

Слайд 21

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

Слайд 22

$private _age: number; @Input()set age(age:number) { if (age > 100) {$

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 = new EventEmitter();
Событие

затем можно запустить с помощью метода emit и передать в него данные.
changeAvg(event){
this.avg = event.target.value;
this.changed.emit(this.avg);

Слайд 25

К дочернему компоненту подключаем новый обработчик события.

Важное замечание: в

обработчиках стандартных событий DOM в метод можно передавать объект $event. Он примет вид стандартного объекта события.

Слайд 26

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

добавьте кнопку, вызывающую основной блок.

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

Содержание

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

1. Приложение “Заметки”. Возможность: создать заметку, просмотр всех заметок, редактирование заметки.

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

import { Component } from "@angular/core";@Component({ selector: "my-app-calc", template: `

ng generate component <имя компонента>Данная команда создаёт все необходимые файлы для

Компонент, в процессе работы проходит через разные этапы. К этим этапам