Я только начал работать с 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 следует компонентной / сервисной модели архитектуры.

Angular 2 Приложение состоит из компонентов. Компонент - это комбинация шаблона HTML и класса компонента (класс машинописного текста), который управляет частью экрана.

Для хорошей практики класс компонента используется для привязки данных к соответствующему представлению. Двухсторонняя привязка данных - отличная функция, предоставляемая angular framework.

Компоненты можно повторно использовать в вашем приложении, используя указанное имя селектора.

Компонент - это тоже своего рода директива с шаблоном.

Две другие директивы:

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