@Directive против @Component в Angular

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

Ответ:

Компоненты

1. Для регистрации компонента мы используем аннотацию метаданных @Component.
2. Компонент представляет собой директиву, которая использует Shadow DOM для создания инкапсулированного визуального поведения, называемого компонентами. Обычно компоненты применяются для создания пользовательских интерфейсов (UI виджетов).
3. Компоненты используются для разбивки приложения на более мелкие части.
4. В каждом элементе DOM может быть только один компонент.
5. Декоратор @View или шаблон templateUrl обязательны в компоненте.

Директивы

1. Для регистрации директив мы используем аннотацию метаданных @Directive.
2. Директива предназначена для добавления поведения к существующему элементу DOM.
3. Директивы используются для проектирования переиспользуемых компонентов.
4. В одном элементе DOM может быть много директив.
5. Директива не использует View.

Источники:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

Компонент — это директива с шаблоном, а декоратор @Component на самом деле является расширенной версией декоратора @Directive, дополненной функциями, связанными с шаблоном.

В Angular 2 и выше «всё — это компонент». Компоненты являются основным способом, с помощью которого мы создаём и задаём элементы и логику на странице, используя как собственные элементы, так и атрибуты, которые добавляют функциональность к нашим существующим компонентам.

Но какую роль играют директивы в Angular 2+?

В Angular существует три типа директив:

1. Компоненты — директивы с шаблоном.
2. Структурные директивы — изменяют разметку DOM, добавляя и удаляя элементы DOM.
3. Атрибутные директивы — изменяют внешний вид или поведение элемента, компонента или другой директивы.

Таким образом, в Angular 2 и выше директивы — это атрибуты, которые добавляют функциональность к элементам и компонентам.

Посмотрите пример из документации Angular:

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

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Что делает этот код? Он расширяет ваши компоненты и HTML элементы, добавляя желтый фон. Использовать его можно следующим образом:

<p myHighlight>Выдели меня!</p>

В то время как компоненты создают целые элементы со всей функциональностью, как в примере ниже:

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

@Component({
  selector: 'my-component',
  template: `
    <div>Привет, меня зовут {{name}}. 
      <button (click)="sayMyName()">Скажи моё имя</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Алиреза';
  }
  sayMyName() {
    console.log('Меня зовут', this.name);
  }
}

И использовать это можно так:

<my-component></my-component>

Когда мы используем этот тег в HTML, компонент будет создан, и вызывается конструктор для его рендеринга.

@Component — это подтип @Directive. Прежде чем углубляться в детали, давайте разберёмся, что такое @Directive.

@Directive — это декоратор, который используется для управления DOM, позволяя добавлять новые элементы или изменять или удалять существующие. Когда Angular встречает любые декораторы, он обрабатывает их во время выполнения и изменяет DOM в соответствии с ними.

Мы можем создавать наши директивы с помощью @Directive, как показано ниже:

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { }
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

Применение в HTML:

<button demoButtonColor>RED BUTTON</button>

Теперь давайте рассмотрим, что такое декоратор @Component.

@Component — это подтип @Directive с одной дополнительной функциональностью. С помощью @Component мы можем создать HTML-шаблон, который можно внедрить в DOM во время выполнения.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

Мы можем использовать его в любом другом компоненте, как показано ниже:

<div>
  <demo-color></demo-color>
</div>

В заключение, используйте @Directive, чтобы создать собственную директиву, которая может изменить элемент или структуру DOM. А @Component подходит для создания многоразовых UI-компонентов с пользовательским поведением.

В контексте программирования директивы предоставляют компилятору указания изменить способ обработки входных данных, то есть изменить поведение.

“Директивы позволяют вам прикреплять поведение к элементам в DOM.”

Директивы делятся на три категории:

• Атрибутные (Attribute)
• Структурные (Structural)
• Компоненты (Component)

Да, в Angular 2 компоненты представляют собой тип директивы. Согласно документации,

“Компоненты Angular являются подмножеством директив. В отличие от директив, компоненты всегда имеют шаблон, и только один компонент может быть создан для каждого элемента в шаблоне.”

Компоненты Angular 2 являются реализацией концепции Web Component. Web Components состоят из нескольких отдельных технологий. Можно рассматривать Web Components как повторно используемые элементы пользовательского интерфейса, созданные с использованием открытых веб-технологий.

• В итоге, директивы — это механизм, с помощью которого мы прикрепляем поведение к элементам в DOM, состоящий из структурных, атрибутных и компонентных типов.
• Компоненты — это специфический тип директивы, который позволяет нам использовать функциональность веб-компонентов, то есть повторное использование — инкапсулированные, повторно используемые элементы, доступные по всему нашему приложению.