@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 attribute setter

Пример задания значения булева Input свойства как директивы, на примере:

DI декораторы Angular

Кратко об декораторах @Self, @SkipSelf, @Host, @Optional. Отличие @Host от @Self

Angular. Manually retry http request

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.

Про Angular Universal & Server-side rendering

ng add @nguniversal/express-engine --clientProject 
npm run build:ssr && npm run serve:ssr

Аналог Jasmine createSpyObj в Jest

// Jest
const serviceMock = {
 methods: jest.fn(),
 you: jest.fn(),
 want: jest.fn(),
 to: jest.fn(),
 mock: jest.fn()
};

Angular. Отличие baseHref от deployUrl

deployUrl - задаёт путь для статических (js, css) файлов в index.html.
baseHref - определяет base, используется в ссылках и маршрутизации (routing) Angular