- •Билет 1
- •Билет 2
- •Структура приложения¶
- •Модуль¶
- •Компонент¶
- •Сервис¶
- •Директива¶
- •Билет 3
- •Билет 4
- •Билет 5
- •Билет 6
- •Билет 7
- •Билет 8
- •Билет 9
- •Билет 10
- •Привязка к сеттеру
- •Билет 12
- •Билет 13
- •Билет 14
- •Билет 15
- •Билет 16
- •Корневой уровень
- •Уровень модуля
- •Уровень компонента
- •Билет17 Не то
- •Билет 18
- •Билет 19
- •Билет 20
- •Билет 21
- •Билет 22
- •Билет 23
- •Билет 24
- •Заключение
- •Билет 25
- •Билет 26
- •Билет 27
- •Билет 28
- •Билет 29
- •Билет 30
Билет 8
Что такое компонент? Что отличает компонент от обычного класса?
Компонент (Angularcomponent) - обособленная часть функционала со своей логикой, HTML-шаблоном и CSS-стилями.
Класс становится Angular компонентом, если его объявлению предшествует декоратор @Component() с объектом конфигурации.
Одним из ключевых элементов приложения являются компоненты. Компонент управляет отображением представления на экране.
Для создания компонента необходимо импортировать функцию декоратора @Component из библиотеки @angular/core. Декоратор @Component позволяет идентифицировать класс как компонент.
Если бы мы не применили декоратор @Component к классу AppComponent, то класс AppComponent компонентом бы не считался.
Декоратор @Component в качестве параметра принимает объект с конфигурацией, которая указывает фреймворку, как работать с компонентом и его представлением.
С помощью свойства template. Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.
Каждый компонент должен иметь один шаблон. Однако необязательно определять шаблон напрямую с помощью свойства template. Можно вынести шаблон во внешний файл с разметкой html, а для его подключения использовать свойство templateUrl.
Шаблон может быть однострочным или многострочным. Если шаблон многострочный, то он заключается в косые кавычки (`), которые стоит отличать от стандартных ординарных кавычек (').
Билет 9
Какие бывают способы привязки шаблона и компонента?
В Angular есть четыре формы привязки данных:
Привязка элемента DOM к значению компонента (односторонняя). В двойных фигурных скобках указывается выражение, к которому идет привязка: {{выражение}}. Например:
1
<h1>Добро пожаловать {{name}}!</h1>
Привязка свойства элемента DOM к значению компонента (односторонняя). Например:
1
<inputtype="text"[value]="name" />
Привязка метода компонента к событию в DOM (генерация события в DOM вызывает метод на компоненте)(односторонняя). Например:
1
<button(click)="addItem(text, price)">Добавить</button>
Двусторонняя привязка, когда элемент DOM привязан к значению на компоненте, при этом изменения на одном конце привязки сразу приводят к изменениям на другом конце. Например:
-
1
<input[(ngModel)]="name" placeholder="name">
также
Привязка к атибуту элемента html
Привязка к классу CSS
Привязка к атибуту элемента html
Билет 10
Какие существуют способы передачи данных в дочерний компонент?
Декоратор @Input() позволяет передавать значения дочерним компонентам, но только на один уровень иерархии.
С помощью @Output() имитируют возникновение события и передают данные родительскому компоненту.
Использование @ViewChild() в родительском Angular component позволяет получить все свойства указанного дочернего компонента.