it-roy-ru.com

@Directive v / s @Component in Angular

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

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

363
Prasanjit Dey

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

Источники:

424
jaker

Компоненты

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

Директива

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

Источники:

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

64
virender

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

48
yusuf tezel

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

http://learnangular2.com/components/

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

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

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

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

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

Итак, что происходит в Angular2 и выше: Directives - это атрибуты, которые добавляют функциональные возможности к elements и component.

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

20
Alireza

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

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

6
Evgeniy Malyutin

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

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

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

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

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

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

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

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

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

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

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

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

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

0
Akshay Rajput