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

86

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

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

uksz
источник
Это объясняется в документации на странице « Атрибуты директив» , первый раздел «Обзор директив».
Марк Райкок 05
4
Возможный дубликат @Directive v / s @Component в angular2
Джон

Ответы:

105

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

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

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

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

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

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

<my-app></my-app>

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

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

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

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

Они используются для придания настраиваемого поведения или стиля существующим элементам путем применения некоторых функций / логики. Like 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>

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

Пардип Джайн
источник
Что за директива «роутер-розетка»? Он не соответствует ИМО ни одному из трех типов выше.
user2516186
1
вот и хороший урок: dev6.com/angular/angular-2-the-three-types-of-directives
Flames
64

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

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

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

Гюнтер Цохбауэр
источник
7

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

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

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

Тьерри Темплиер
источник
2
Не вижу цели директив атрибутов. Что они предлагают помимо CSS?
Тим Макнамара
3
@TimMcNamara, директивы Angular могут иметь логику / методы, поэтому с помощью директивы атрибутов вы можете сделать больше, чем с помощью простого CSS. Вы можете передать какое-либо значение родительского свойства в директиву атрибута, и элемент будет отображаться или вести себя по-разному в зависимости от значения этого свойства.
Марк Райкок 05
Вы можете найти хороший пример здесь: angular.io/docs/ts/latest/guide/attribute-directives.html
Джорис Браунс,
6

Вот собственно определение.

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

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

Джон Хенкель
источник
3

Резюме:

Компонент - это директива со связанным представлением (т. Е. 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.
Виллем ван дер Вин
источник
2

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

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

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

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

Компонент - это тоже своего рода директива с шаблоном.

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

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

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

Малатеш Патил
источник
0

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

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

Директивы атрибутов - это классы, которые могут изменять поведение или внешний вид отдельного элемента. Для создания атрибутивной директивы примените @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или для повторения одного и того же содержимого для каждого объекта в источнике данных, например *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

фгул
источник