@Directive v/s @Component in Angular

Опубликовано в Angular • 13 августа 2018 г. • 1 мин. на чтение

Директивы добавляют поведение к существующим DOM элементам или компонентам Angular

import { Directive, HostListener } from '@angular/core';

@Directive({
    selector: "[logOnClick]"
})
class LogOnClick {
  @HostListener('click')
  onClick() { console.log('Element clicked!'); }
}

Использование:

<button logOnClick>I log when clicked!</button>

Компоненты создают новые DOM-элементы с определённым поведением, реализованным в классе компонента. Имеют шаблоны (templates).

import { Component, Input } from '@angular/core';

@Component({
  selector: 'card',
  template: `<h1>{{name}}</h1>`
})
class ContactCard {
  @Input() name: string
}

Использоваение:

<card [name]="'foo'"></card>

Похожие записи

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

Angular параллельные и последовательные запросы на RxJS

forkJoin - параллельные запросы, mergeMap - последовательные запросы

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

Конфигурируемые модули Angular

Создание модуля с методом forRoot, который принимает объект конфигурации модуля.

Angular. HTTP long polling

httpRequest.pipe(
  repeat(),
  takeUntil(stop$)
).subscribe(x => console.log(x));

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.