Ответ 1

По сути, в Angular2 есть три типа директив согласно документации.

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

Составная часть

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

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

Используйте эту директиву на ваш взгляд как:

<my-app></my-app>

Для директивы компонента я нашел лучший учебник здесь.

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

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

Директивы атрибутов

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

Во-первых, мы должны импортировать директиву из @angular/core

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

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

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

<span Icheck>HEllo Directive</span>

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

Ответ 2

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

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

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

Ответ 3

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

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

Надеюсь, это поможет тебе, Тьерри

Ответ 4

Angular 2 следует за моделью компонента/службы архитектуры.

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

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

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

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

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

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

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

Ответ 5

Вот актуальное определение.

• Если у него есть шаблон, это компонент
• иначе, если в скобках есть селектор "[likethis]", это директива атрибута
• иначе это структурная директива.

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

Ответ 6

Резюме:

Компонент - это директива со связанным представлением (т.е. HTML, который будет отображаться). Все компоненты являются директивами, но не все директивы являются компонентами. Существует три типа директив:

• Компонент: представление со связанным поведением. Этот тип директивы фактически добавляет элементы DOM
• Директивы атрибутов: могут быть присоединены к элементам DOM (и компонентам, поскольку они являются элементами DOM) для изменения внешнего вида или поведения элемента.
• Структурные директивы: могут быть присоединены к элементам DOM (и компонентам, поскольку они являются элементами DOM) для изменения макета DOM. Структурные директивы начинаются с * и фактически добавляют или удаляют элемент DOM. Например, *ngIf который может вставлять или удалять элемент DOM (или угловой компонент, который является пользовательским элементом DOM, но все же элементом DOM).

Пример:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
 }
}

@Component({
  selector: 'app-root',
  template: '
    <div *ngIf='myBool' appHighlight>Hi there</div>
  ',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

В приведенном выше примере мы можем наблюдать следующее:

• Компонент AppComponent имеет шаблон с элементом <div> который отображается, привет.
• Директива атрибута HighlightDirective находится в элементе <div>. Это означает, что он будет манипулировать поведением элемента <div>. В этом случае он выделит текст и станет желтым.
• Структурная директива *ngIf также находится в элементе <div> и будет определять, должен ли элемент быть вставлен. <div> будет отображаться условно в зависимости от того, может ли выражение myBool быть приведено к true.

Ответ 7

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

Директивы атрибутов:

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

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Добавление атрибута директивы template.html Файл

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Структурные директивы:

Структурные директивы изменяют макет HTML-документа, добавляя и удаляя элементы в виде микро-шаблонов. Структурные директивы позволяют условно добавлять содержимое на основе результата выражения, такого как *ngIf или *ngIf и то же содержимое для каждого объекта в источнике данных, такого как *ngFor.

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

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Компоненты:

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

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

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

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: '
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  '
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

от официального угла

из Pro-Angular книги