@Directive vs @Component у кутовій

Яка різниця між кутовими @Componentта @Directiveв них? Вони, схоже, виконують одне і те ж завдання і мають однакові атрибути.

Які є випадки використання та коли слід віддати перевагу один одному?

@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це компонент інтерфейсу для багаторазового використання, який ми могли б використовувати в будь-якому місці нашого додатку, навіть в інших компонентах. Вони в основному складають блоки побудови інтерфейсу наших програм.

Підводячи підсумок

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

Джерела:

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

Компоненти

1. Для реєстрації компонента використовується @Componentанотація метаданих.
2. Компонент - це директива, яка використовує тінь DOM для створення інкапсульованої візуальної поведінки, що називається компонентами. Компоненти зазвичай використовуються для створення віджетів інтерфейсу користувача.
3. Компонент використовується для розбиття програми на більш дрібні компоненти.
4. На елемент DOM може бути присутнім лише один компонент.
5. @View шаблон декоратора або templateurl є обов'язковим у складі.

Директива

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

Джерела:

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

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

У куті 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, Компоненти є типом Директиви. За словами доктора,

«Кутові компоненти - це підмножина директив. На відміну від директив, компоненти завжди мають шаблон, і лише один компонент може бути інстанційним для елемента в шаблоні. "

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

• Отже, у підсумкових директивах Механізм, за допомогою якого ми прив’язуємо поведінку до елементів у DOM, що складається з типів структур, атрибутів та компонентів.
• Компоненти - це специфічний тип директиви, який дозволяє нам використовувати функціональні можливості веб-компонентів 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>

Детальніше про директиви