@Directive v / s @Component in Angular

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

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

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

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

• Атрибут
• Структурный
• Компонент

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

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

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

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

В 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, этот компонент будет создан, а конструктор будет вызван и визуализирован.

Компоненты

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 может быть узлом в дереве обнаружения изменений. Это означает, что вы не можете установить ChangeDetectionStrategy.OnPush в @Directive. Несмотря на это, директива может иметь свойства @Input и @Output, и вы можете внедрять и манипулировать из нее компонентом хоста ChangeDetectorRef. Поэтому используйте Компоненты, когда вам нужен детальный контроль над деревом обнаружения изменений.

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

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

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

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

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

Компоненты

Компоненты являются самым основным стандартным блоком UI Углового приложения. Угловое приложение содержит дерево Угловых компонентов. Наше приложение в Угловом основано дерево компонента . Каждый компонент должен иметь свой шаблон, моделирование, жизненный цикл, селектор, и т.д. Так, каждый компонент имеет свою структуру , можно рассматривать их как независимо автономное маленькое веб-приложение с собственным шаблоном и логикой и возможностью связаться и использоваться вместе с другими компонентами.

Образец .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 был представлен здесь

, Видят [еще 116] о Компонентах

@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>

См. [еще 117] о директивах