Skip to content

components.md

Latest commit

 

History

History
143 lines (91 loc) · 8.44 KB

components.md

File metadata and controls

143 lines (91 loc) · 8.44 KB

Какие минимальные требования к компоненту?

import { Component } from "@angular/core";

@Component({
	templateUrl: "./minimum.component.html", // or template: ''
})
export class MinimumComponent {}

Нужно учесть:

  • constructor не обязателен, он генерируется автоматически.
  • селектор не обязателен, доступ к компоненту можно получить через роутер по названию класса.
  • шаблон обязателен (сам шаблон или ссылка на отдельный файл).

В чем разница между компонентом и директивой?

Три вида директив в Angular:

  1. Компонент - директива с шаблоном. Непосредственно создает новое представление (DOM элементы) с определённым поведением.
  2. Структурная директива - меняет DOM добавляя или удаляя элементы (*ngFor)
  3. Атрибутная директива - изменяет появление или поведение элемента, компонента или другой директивы (ngStyle)

Как происходит взаимодействие компонентов?

Типы взаимодействия:

  • Родитель/дочерний компонент с помощью декоратора @Input, декоратора @Output и EventEmitter
  • Взаимодействие через сервисы и Angular dependency injection
  • Взаимодействие через store (redux), который тоже использует Angular dependency injection

Как сделать двухстороннее связывание данных?

Двухстороннее связывание можно сделать как с помощью () так и с [].

<component [(title)]="name"></component>

<component [title]="name" (titleChange)="name=$event"></component>

<input [(ngModel)]="userName" />

Последний способ - частный случай для форм.


Как бы вы сделали компонент для показа сообщений об ошибках?

Существует много способов. Допустим при ошибке нам нужно показать ToastComponent:

  • Создаем ErrorService и инжектируем его туда, откуда мы хотим показать ошибку.
  • Создаем ToastContainerComponent, инжектируем сервис сюда и подписываемся на ошибки. Этот компонент передает данные дочернему компоненту и управляет его жизненным циклом.
  • Создаем презентационный компонент ToastComponent, который получает данные через @Input и показывает сообщение.
  • Вставляем ToastContainerComponent в шаблон приложения. Лучше всего в AppComponent.

Что такое Lifecycle Hooks?

У Angular приложения есть жизненный цикл. Он состоит из методов, которые вызываются на различных этапах работы приложения.

lifecycle hooks

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

  • ngOnInit: вызывается всякий раз, когда происходит инициализация директивы / компонента после того, как Angular впервые отображает свойства с привязкой к данным.

  • ngDoCheck: нужен для обнаружения и реагирования на изменения, которые Angular не может обнаружить самостоятельно.

  • ngAfterContentInit: вызывается после того, как Angular проецирует внешний контент в представление компонента.

  • ngAfterContentChecked: вызывается после того, как Angular проверяет содержимое, проецируемое в компонент.

  • ngAfterViewInit: вызывается после того, как Angular инициализирует представления компонента и дочерние представления.

  • ngAfterViewChecked: вызывается после того, как Angular проверяет представления компонента и дочерние представления.

  • ngOnDestroy: это этап очистки непосредственно перед тем, как Angular уничтожит директиву / компонент.


Что такое View Encapsulation?

View Encapsulation определяет, могут ли CSS и HTML, определенные в компоненте, влиять на все приложение или наоборот. Angular предоставляет три стратегии инкапсуляции:

Emulated (по умолчанию) - стили из основного HTML распространяются на компонент. Стили, определенные в декораторе @Component этого компонента, относятся только к этому компоненту.

ShadowDom - стили из основного HTML не распространяются на компонент. Стили, определенные в этом компоненте ограничены только этим компонентом.

None - стили из компонента распространяются обратно на основной HTML и, следовательно, видны всем компонентам на странице.


Что такое динамические компоненты?

Динамические компоненты - это компоненты, которые создаются и уничтожаются во время выполнения. Они могут быть созданы с помощью ViewContainerRef.createComponent().

import {
	Component,
	ViewChild,
	ViewContainerRef,
	ComponentFactoryResolver,
} from "@angular/core";

@Component({
	selector: "app-root",
	template: `
		<div #container></div>
		<button (click)="createComponent()">Create</button>
	`,
})
export class AppComponent {
	@ViewChild("container", { read: ViewContainerRef })
	container: ViewContainerRef;

	constructor(private resolver: ComponentFactoryResolver) {}

	createComponent() {
		this.container.createComponent(
			this.resolver.resolveComponentFactory(ChildComponent),
		);
	}
}

Что такое standalone компоненты?

Standalone компоненты -Standalone компоненты в Angular (v14+) — это автономные, модульные строительные блоки, которым не требуется NgModule для объявления. При установке standalone: true в декораторе @Component (что по умолчанию в последних версиях Angular) компонент самостоятельно управляет своими зависимостями через массив imports, уменьшая шаблонный код, упрощая поддержку и обеспечивая более эффективное tree-shaking и ленивую загрузку.