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

Question

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

Я только начал работать с Angular 2.

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

780 5

angular directive components

5 ответов:

Comments

Ничего не найдено.

Pardeep Jain · Accepted Answer · 2016-01-05 18:11:41

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

компонент

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

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

компонент

также является типом директивы с шаблоном, стилями и логической частью, которая является самым известным типом директивы среди всех в angular2. В этом типе директивы вы можете использовать другие директивы, будь то пользовательские или встроенные в @ component аннотация, как показано ниже:
@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})
используйте эту директиву в вашем представлении как:
<my-app></my-app>
для директивы компонента я нашел лучший учебник здесь.

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

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

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

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

во первых мы должны импортировать директиву от angular2 / core
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   custom logic here,,,,
}
и мы должны использовать это в представлении, как показано ниже:
<span Icheck>HEllo Directive</span>
для получения дополнительной информации вы можете прочитать в официальном руководстве здесь и здесь

Günter Zöchbauer · Accepted Answer · 2018-02-02 12:59:42

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

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

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

Thierry Templier · Accepted Answer · 2016-01-05 15:53:18

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

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

The атрибут те что обновляет поведение внешнего вида элемента, к которому они прикреплены.

надеюсь, что это помогает вам, Тьерри

Malatesh Patil · Accepted Answer · 2017-06-02 13:13:16

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

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

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

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

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

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

структурные директивы-изменение макета DOM путем добавления и удаления элементов DOM. Например:NgFor и NgIf.

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

John Henckel · Accepted Answer · 2018-07-17 18:03:18

вот фактическое определение.

Если у него есть шаблон, это компонент

еще если у него есть селектор в скобки "[likethis]", это Атрибут Директивы

еще это Структурные Директивы.

любое другое определение неверно.