В чем разница между компонентом и директивой?

Question

Я только начал работать с Angular 2. Мне интересно, какие различия между компонентами и директивами в угловом 2?

Thanks

Answer 1

В основном существует три типа директив в angular2 согласно документации.

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

компонентов

также тип директивы с шаблоном, стилей и логической части, которая является самым известным типом директивы среди всех в угловом2. В этом типе директивы вы можете использовать другие директивы, является ли это обычай или встроенным в @component аннотации, как следующее:

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

использовать эту директиву, по вашему мнению, как:

<my-app></my-app> 

для директивы компоненты я нашел Лучшее Аркадам here.

структурных директивы

как * ngFor и * ngIf используется для изменения Формуляра DOM по добавление и удаление элементов DOM.explained here

директивы Атрибут

используются, чтобы дать пользовательское поведение или стиль к существующим элементам, применяя некоторые функции/логик. например, ngStyle - это директива атрибута, позволяющая динамически придавать стиль элементам. мы можем создать собственную директиву и использовать это в качестве атрибута некоторых предопределенных или пользовательских элементов, вот пример простой директивы:

во-первых, мы должны импортировать директиву из angular2/ядро ​​

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

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

и мы имеем использовать это в представлении, как показано ниже:

<span Icheck>HEllo Directive</span> 

для получения дополнительной информации вы можете прочитать официальный учебник here и here

Answer 2

Компоненты имеют свой собственный вид (HTML и стили). Директивы - это просто «поведение», добавленное к существующим элементам и компонентам.
Component распространяется Directive.

Из-за этого может быть только один компонент на хост-элементе, но несколько директив.

Структурные директивы являются директивами, применяемыми к <template> элементам и используются для добавления/удаления содержимого (штамп шаблона). * в директивных приложениях, таких как *ngIf, вызывает неявное создание тега <template>.

Answer 3

Чтобы закончить то, что сказал Гюнтер, можно выделить два вида директив:

• structural ones, который обновляет макет DOM путем добавления или удаления элементов. Два общих: NgFor и NgIf. Они связаны с концепцией шаблона и должны иметь префикс *. См. Раздел «Шаблоны и *» в этой ссылке для получения дополнительной информации: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• attribute ones, который обновляет поведение внешнего вида элемента, к которому они присоединены.

Надеется, что это помогает вам, Thierry

Answer 4

Угловой 2 следует за компонентом/сервисной моделью архитектуры.

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

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

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

Компонент также является своеобразной директивой с шаблоном.

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

1. Структурные директивы, изменить расположение DOM путем добавления и удаления DOM элементов. Пример: NgFor и NgIf.

2. Директивы атрибутов - изменение внешнего вида или поведения элемента, компонента или другой директивы. Пример: NgStyle