@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

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

Правильный импорт lodash методов

После анализа bundl'a разрабатываемого приложения меня насторожил момент, что lodash занимает хороший такой кусок в 95kb, хотя используется всего 3 функции. И вот к чему привели поиски.

Angular environment service

Использование сервиса для окружения вместо прямой ссылки на environment.ts

Аналог Jasmine createSpyObj в Jest

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

Angular. Показать spinner во время навигации

Подписка на router.events, на событие NavigationStart spinner показывается, на события NavigationEnd, NavigationCancel, NavigationError скрывается.

Angular. Маршрут c 2 опциональными параметрами

/{mainId}
/{mainId}/{secondaryId}

Использования URL Matcher для ручного определения сегментов