@Directive vs @Component in Angular

Какая разница между @Componentи @Directiveв Angular? Кажется, что они оба выполняют одну и ту же задачу и имеют одинаковые атрибуты.

Каковы случаи использования и когда отдавать предпочтение одному другому?

@Component требует представления, а @Directive - нет.

Директивы

Я сравниваю @Directive с директивой Angular 1.0 с параметромrestrict: 'A' (Директивы не ограничиваются использованием атрибутов.) Директивы добавляют поведение к существующему элементу DOM или существующему экземпляру компонента. Одним из примеров использования директивы будет регистрация клика по элементу.

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

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

Который будет использоваться так:

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

Компоненты

Компонент вместо добавления / изменения поведения фактически создает свое собственное представление (иерархию элементов DOM) с прикрепленным поведением. Примером использования этого может быть компонент карты контакта:

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

Который будет использоваться так:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCardэто повторно используемый компонент пользовательского интерфейса, который мы можем использовать в любом месте нашего приложения, даже в других компонентах. Они в основном составляют строительные блоки UI наших приложений.

В итоге

Напишите компонент, если вы хотите создать повторно используемый набор элементов DOM пользовательского интерфейса с пользовательским поведением. Напишите директиву, когда вы хотите написать многократно используемое поведение для дополнения существующих элементов DOM.

Источники:

• @ Директивная документация
• @Компонентная документация
• Полезное сообщение в блоге

Компоненты

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

директива

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

Источники:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Компонент представляет собой директиву с шаблоном, а @Componentдекоратор фактически является @Directiveдекоратором, расширенным с помощью шаблонно-ориентированных функций.

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

http://learnangular2.com/components/

Но что тогда делают директивы в Angular2 +?

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

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

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

https://angular.io/docs/ts/latest/guide/attribute-directives.html

То, что происходит в Angular2 и выше, это Директивы , атрибуты, которые добавляют функциональность элементам и компонентам .

Посмотрите на образец ниже от Angular.io:

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

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

Итак, что он делает, он расширяет ваши компоненты и элементы HTML с добавлением желтого фона, и вы можете использовать его, как показано ниже:

<p myHighlight>Highlight me!</p>

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

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

и вы можете использовать его, как показано ниже:

<my-component></my-component>

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

Обнаружение изменений

Только @Componentможет быть узлом в дереве обнаружения изменений. Это означает, что вы не можете установить ChangeDetectionStrategy.OnPushв @Directive. Несмотря на это, директива может иметь @Inputи @Outputсвойства, и вы можете внедрять и манипулировать компонентами хоста ChangeDetectorRefиз нее. Поэтому используйте Компоненты, когда вам нужен детальный контроль над деревом обнаружения изменений.

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

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

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

• атрибут
• структурная
• Составная часть

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

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

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

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

Если вы ссылаетесь на официальные угловые документы

https://angular.io/guide/attribute-directives

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

1. Компоненты - директивы с шаблоном.
2. Структурные директивы - измените макет DOM, добавив и удалив элементы DOM. напр. * ngIf
3. Директивы атрибутов - изменяют внешний вид или поведение элемента, компонента или другой директивы. например, [ngClass].

По мере роста Приложения мы сталкиваемся с трудностями в поддержании всех этих кодов. В целях повторного использования мы разделяем нашу логику на интеллектуальные компоненты и немые компоненты, и мы используем директивы (структурные или атрибутные) для внесения изменений в DOM.

Компоненты

Компоненты - это основной элемент пользовательского интерфейса приложения Angular. Приложение Angular содержит дерево компонентов Angular. Наше приложение на Angular построено на дереве компонентов . Каждый компонент должен иметь свой шаблон, стиль, жизненный цикл, селектор и т. Д. Итак, каждый компонент имеет свою структуру. Вы можете рассматривать их как отдельное отдельное небольшое веб-приложение с собственным шаблоном и логикой, а также возможностью общаться и использоваться вместе с другими. компоненты.

Пример файла .ts для компонента:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

и его ./app.component.html представление шаблона:

Hello {{title}}

Затем вы можете отобразить шаблон AppTrainingComponent с его логикой в ​​других компонентах (после добавления его в модуль).

<div>
   <app-training></app-training>
</div>

и результат будет

<div>
   my-app-training
</div>

как AppTrainingComponent был представлен здесь

Подробнее о компонентах

Директивы

Директива изменяет внешний вид или поведение существующего элемента DOM. Например, [ngStyle] является директивой. Директивы могут расширять компоненты (могут использоваться внутри них), но они не создают целое приложение . Допустим, они просто поддерживают компоненты. У них нет своего собственного шаблона (но, конечно, вы можете манипулировать шаблоном с ними).

Образец директивы:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

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

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Смотрите больше о директивах