@Directive v/s @Компонент в Angular

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

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

ОТВЕТЫ

Ответ 1

Для @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.

Источники:

Ответ 2

Компоненты

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

директива

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

Источники:

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

Ответ 3

Компонент является директивой-с-шаблоном, а декоратор @Component на самом деле является декоратором @Directive, расширенным с использованием шаблонов.

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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

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

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

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

Ответ 7

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

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

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

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

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

Ответ 8

Компоненты

Компоненты - это основной элемент пользовательского интерфейса приложения 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>

Смотрите больше о директивах