Я щойно почав працювати з Angular 2.

Мені було цікаво, в чому різниця між компонентами та директивами в Angular 2?

В основному існує три типи директив у Angular2 відповідно до документації.

• Компонент
• Структурні директиви
• Директиви щодо атрибутів

Компонент

Це також тип директиви з шаблоном, стилями та логічною частиною, який є найвідомішим типом директив серед усіх у Angular2. У цьому типі директив ви можете використовувати інші директиви, будь то спеціальні чи вбудовані в @Componentанотацію, як показано нижче:

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

Використовуйте цю директиву у своєму поданні як:

<my-app></my-app>

Для директиви про компонент я знайшов найкращий підручник тут.

Структурні директиви

Як *ngForі *ngIf, використовується для зміни макета DOM шляхом додавання та видалення елементів DOM. пояснюється тут

Директиви щодо атрибутів

Вони використовуються для надання власної поведінки або стилю існуючим елементам, застосовуючи деякі функції / логіку. Like ngStyle- це директива атрибута для динамічного надання стилю елементам. Ми можемо створити власну директиву і використовувати її як атрибут деяких заздалегідь визначених або спеціальних елементів, ось приклад простої директиви:

По-перше, ми повинні імпортувати директиву з @angular/core

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

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Ми можемо використовувати це у поданні, як показано нижче:

<span Icheck>HEllo Directive</span>

Для отримання додаткової інформації ви можете прочитати офіційний підручник тут і тут

Компоненти мають власний погляд (HTML і стилі). Директиви - це просто "поведінка", додана до існуючих елементів та компонентів.
Componentпоширюється Directive.

Через це в елементі хоста може бути лише один компонент, але кілька директив.

Структурні директиви - це директиви, що застосовуються до <template>елементів і використовуються для додавання / видалення вмісту (штамп шаблону). Програми *директиви in, наприклад, *ngIfпризводять <template>до неявного створення тегу.

Щоб завершити сказане Гюнтером, можна виділити два типи директив:

• У структурних ті , що оновлює макет DOM шляхом додавання або видалення елементів. Двома загальними є NgForі NgIf. Вони пов’язані з концепцією шаблону і повинні мати префікс *. Детальніше див. У розділі "Шаблони та *" за цим посиланням: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• В атрибутах ті , що оновлює поведінку зовнішнього вигляду елемента вони приєднані один.

Сподіваюся, це допоможе тобі, Тьєррі

Ось власне визначення.

• Якщо в ньому є шаблон , це - Компонент
• в іншому випадку, якщо він має селектор у дужках "[likethis]", це директива щодо атрибутів
• в іншому випадку це Структурна директива .

Будь-яке інше визначення є помилковим.

Короткий зміст:

Компонент - це директива з пов’язаним видом (тобто HTML, який має бути відображений). Всі компоненти є директивами, але не всі директиви є компонентами. Існує три типи директив:

• Компонент : подання з пов’язаною поведінкою. Цей тип директиви фактично додає елементи DOM
• Директиви щодо атрибутів : Можна приєднувати до елементів DOM (і компонентів, оскільки вони є елементами DOM), щоб змінити вигляд або поведінку елемента.
• Структурні директиви : Можна приєднувати до елементів DOM (і компонентів, оскільки вони є елементами DOM), щоб змінити макет DOM. Структурні директиви починаються з * і фактично додають або видаляють елемент DOM. Наприклад, *ngIfякий може вставити або видалити елемент DOM (або кутовий компонент, який є користувацьким елементом DOM, але все ще є елементом DOM).

Приклад:

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

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

У наведеному вище прикладі ми можемо спостерігати наступне:

• Компонент AppComponentмає шаблон з <div>елементом, який відображається, привіт.
• Директива атрибутів HighlightDirective знаходиться на <div>елементі. Це означає, що він буде маніпулювати поведінкою <div>елемента. У цьому випадку він виділить текст і забарвить його в жовтий колір.
• Структурна директива *ngIfтакож розташована на <div>елементі і визначатиме, чи потрібно вставляти елемент. Відображення <div>буде умовно показано залежно від того, чи myBoolможна примусити вираз true.

Angular 2 відповідає компонентній / службовій моделі архітектури.

Кутова 2 Аплікація складається з компонентів. Компонент - це комбінація шаблону HTML і класу компонента (клас машинопису), який контролює частину екрана.

Для належної практики клас компонентів використовується для прив'язки даних до відповідного подання. Двостороннє прив'язка даних - чудова функція, яку надає кутова структура.

Компоненти можна багаторазово використовувати у вашій програмі, використовуючи надане ім’я селектора.

Компонент - це також своєрідна директива з шаблоном.

Інші дві директиви такі

1. Структурні директиви - змініть макет DOM, додаючи та видаляючи елементи DOM. Приклад: NgForі NgIf.

2. Атрибутивні директиви - змінюють зовнішній вигляд або поведінку елемента, компонента або іншої директиви. Приклад: NgStyle

Насправді компоненти також є директивами, але мають відмінності між ними.

Директиви щодо атрибутів :

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

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

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Додавання атрибута директиви template.html Файл

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Структурні директиви :

Структурні директиви змінюють макет документа HTML, додаючи та видаляючи елементи, як мікро-шаблони. Структурні директиви дозволяють додавати вміст умовно на основі результату виразу, такого як *ngIfабо для повторення того самого вмісту для кожного об'єкта у джерелі даних, наприклад *ngFor.

Ви можете використовувати вбудовані директиви для загальних завдань, але написання спеціальних структурних директив надає можливість адаптувати поведінку до вашої програми.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Компоненти :

Компоненти - це директиви, які є власними шаблонами, а не покладаються на вміст, наданий з інших місць. Компоненти мають доступ до всіх функцій директиви, все ще мають хост-елемент, все ще можуть визначати властивості введення та виведення тощо, але вони також визначають власний вміст.

Неважко недооцінити важливість шаблону, але атрибути та структурні директиви мають обмеження. Директиви можуть виконувати корисну та потужну роботу, але вони не надто розуміють елементи, до яких вони застосовуються. Директиви є найбільш корисними, коли вони є інструментами загального призначення, такими як ngModelдиректива, яка може застосовуватися до будь-якої властивості моделі даних та будь-якого елемента форми, незалежно від того, для чого ці дані або елемент використовуються.

Навпаки, компоненти тісно пов’язані із вмістом своїх шаблонів. Компоненти забезпечують дані та логіку, які будуть використовуватися прив'язками даних, що застосовуються до елементів HTML у шаблоні, які забезпечують контекст, що використовується для оцінки виразів прив'язки даних та виконує роль клею між директивами та рештою програми. Компоненти також є корисним інструментом для розбиття великих Angular-проектів на керовані фрагменти.

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

від офіційного кутового

з книги Pro-Angular