Согласно документации, в основном в Angular2 есть три типа директив.
Составная часть
Структурные директивы
Директивы атрибутов
Составная часть
Это также тип директивы с шаблоном, стилями и логической частью, который является самым известным типом директив среди всех в Angular2. В этом типе директивы вы можете использовать другие директивы, независимо от того, являются ли они настраиваемыми или встроенными в @Componentаннотацию, как показано ниже:
Используйте эту директиву в своем представлении как:
<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>
Для получения дополнительной информации вы можете прочитать официальное руководство здесь и здесь.
Компоненты имеют собственное представление (HTML и стили). Директивы - это просто «поведение», добавленное к существующим элементам и компонентам. Componentрасширяется Directive.
Из-за этого в элементе хоста может быть только один компонент, но несколько директив.
Структурные директивы - это директивы, применяемые к <template>элементам и используемые для добавления / удаления контента (штамповка шаблона). Применение *директивы in, например, *ngIfвызывает <template>неявное создание тега.
Чтобы завершить то, что сказал Гюнтер, мы можем выделить два типа директив:
В структурных те , что обновляет макет DOM путем добавления или удаления элементов. Двумя общими являются NgForи NgIf. Они связаны с концепцией шаблона и должны иметь префикс *. См. Раздел «Шаблоны и *» в этой ссылке для получения дополнительной информации: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
В атрибутах те , что обновляет поведение внешнего вида элемента они присоединены один.
Не вижу цели директив атрибутов. Что они предлагают помимо CSS?
Тим Макнамара
3
@TimMcNamara, директивы Angular могут иметь логику / методы, поэтому с помощью директивы атрибутов вы можете сделать больше, чем с помощью простого CSS. Вы можете передать какое-либо значение родительского свойства в директиву атрибута, и элемент будет отображаться или вести себя по-разному в зависимости от значения этого свойства.
Компонент - это директива со связанным представлением (т. Е. HTML для визуализации). Все компоненты являются директивами, но не все директивы являются компонентами. Есть три типа директив:
Компонент : представление со связанным поведением. Этот тип директив фактически добавляет элементы DOM
Директивы атрибутов : могут быть прикреплены к элементам DOM (и компонентам, поскольку они являются элементами DOM) для изменения внешнего вида или поведения элемента.
Структурные директивы : могут быть прикреплены к элементам DOM (и компонентам, поскольку они являются элементами DOM) для изменения макета DOM. Структурные директивы начинаются с * и фактически добавляют или удаляют элемент DOM. Например, *ngIfкоторый может вставлять или удалять элемент DOM (или угловой компонент, который является настраиваемым элементом DOM, но все же элементом DOM).
В приведенном выше примере мы можем наблюдать следующее:
Компонент AppComponentимеет шаблон с <div>элементом, который отображается, привет.
Директива атрибута HighlightDirective находится на <div>элементе. Это означает, что он будет управлять поведением <div>элемента. В этом случае он выделит текст и станет желтым.
Структурная директива *ngIfтакже находится на <div>элементе и определяет, нужно ли вставить элемент. <div>Будет условно показано , в зависимости от того , выражение myBoolможет быть принужден к true.
Angular 2 следует компонентной / сервисной модели архитектуры.
Angular 2 Приложение состоит из компонентов. Компонент - это комбинация шаблона HTML и класса компонента (класс машинописного текста), который управляет частью экрана.
Для хорошей практики класс компонента используется для привязки данных к соответствующему представлению. Двухсторонняя привязка данных - отличная функция, предоставляемая angular framework.
Компоненты можно повторно использовать в вашем приложении, используя указанное имя селектора.
Компонент - это тоже своего рода директива с шаблоном.
Две другие директивы:
Структурные директивы - изменяют макет DOM, добавляя и удаляя элементы DOM. Пример: NgForи NgIf.
Директивы атрибутов - изменяют внешний вид или поведение элемента, компонента или другой директивы. Пример: NgStyle
На самом деле компоненты тоже являются директивами, но между ними есть различия.
Директивы по атрибутам :
Директивы атрибутов - это классы, которые могут изменять поведение или внешний вид отдельного элемента. Для создания атрибутивной директивы примените @Directiveк классу.
Добавление атрибута директивы в файл 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;
}
Ответы:
Согласно документации, в основном в Angular2 есть три типа директив.
Составная часть
Это также тип директивы с шаблоном, стилями и логической частью, который является самым известным типом директив среди всех в Angular2. В этом типе директивы вы можете использовать другие директивы, независимо от того, являются ли они настраиваемыми или встроенными в
@Component
аннотацию, как показано ниже:Используйте эту директиву в своем представлении как:
Для директивы компонента я нашел здесь лучший учебник .
Структурные директивы
Подобно
*ngFor
и*ngIf
, используется для изменения макета DOM путем добавления и удаления элементов DOM. объяснено здесьДирективы атрибутов
Они используются для придания настраиваемого поведения или стиля существующим элементам путем применения некоторых функций / логики. Like
ngStyle
- это директива атрибута, динамически задающая стиль элементам. Мы можем создать нашу собственную директиву и использовать ее как атрибут некоторых предопределенных или настраиваемых элементов, вот пример простой директивы:Сначала нам нужно импортировать директиву из
@angular/core
Мы можем использовать это в представлении, как показано ниже:
Для получения дополнительной информации вы можете прочитать официальное руководство здесь и здесь.
источник
Компоненты имеют собственное представление (HTML и стили). Директивы - это просто «поведение», добавленное к существующим элементам и компонентам.
Component
расширяетсяDirective
.Из-за этого в элементе хоста может быть только один компонент, но несколько директив.
Структурные директивы - это директивы, применяемые к
<template>
элементам и используемые для добавления / удаления контента (штамповка шаблона). Применение*
директивы in, например,*ngIf
вызывает<template>
неявное создание тега.источник
Чтобы завершить то, что сказал Гюнтер, мы можем выделить два типа директив:
NgFor
иNgIf
. Они связаны с концепцией шаблона и должны иметь префикс*
. См. Раздел «Шаблоны и *» в этой ссылке для получения дополнительной информации: http://victorsavkin.com/post/119943127151/angular-2-template-syntaxНадеюсь, это поможет тебе, Тьерри
источник
Вот собственно определение.
Любое другое определение неверно.
источник
Резюме:
Компонент - это директива со связанным представлением (т. Е. HTML для визуализации). Все компоненты являются директивами, но не все директивы являются компонентами. Есть три типа директив:
*ngIf
который может вставлять или удалять элемент DOM (или угловой компонент, который является настраиваемым элементом DOM, но все же элементом DOM).Пример:
В приведенном выше примере мы можем наблюдать следующее:
AppComponent
имеет шаблон с<div>
элементом, который отображается, привет.<div>
элементе. Это означает, что он будет управлять поведением<div>
элемента. В этом случае он выделит текст и станет желтым.*ngIf
также находится на<div>
элементе и определяет, нужно ли вставить элемент.<div>
Будет условно показано , в зависимости от того , выражениеmyBool
может быть принужден кtrue
.источник
Angular 2 следует компонентной / сервисной модели архитектуры.
Angular 2 Приложение состоит из компонентов. Компонент - это комбинация шаблона HTML и класса компонента (класс машинописного текста), который управляет частью экрана.
Для хорошей практики класс компонента используется для привязки данных к соответствующему представлению. Двухсторонняя привязка данных - отличная функция, предоставляемая angular framework.
Компоненты можно повторно использовать в вашем приложении, используя указанное имя селектора.
Компонент - это тоже своего рода директива с шаблоном.
Две другие директивы:
Структурные директивы - изменяют макет DOM, добавляя и удаляя элементы DOM. Пример:
NgFor
иNgIf
.Директивы атрибутов - изменяют внешний вид или поведение элемента, компонента или другой директивы. Пример:
NgStyle
источник
На самом деле компоненты тоже являются директивами, но между ними есть различия.
Директивы атрибутов - это классы, которые могут изменять поведение или внешний вид отдельного элемента. Для создания атрибутивной директивы примените
@Directive
к классу.Добавление атрибута директивы в файл template.html
Структурные директивы изменяют макет документа HTML, добавляя и удаляя элементы в виде микро-шаблонов. Структурные директивы позволяют добавлять содержимое условно на основе результата выражения, такого как
*ngIf
или для повторения одного и того же содержимого для каждого объекта в источнике данных, например*ngFor
.Вы можете использовать встроенные директивы для общих задач, но написание пользовательских структурных директив дает возможность адаптировать поведение к вашему приложению.
Компоненты - это директивы, которые являются собственными шаблонами, а не полагаются на контент, предоставленный из других источников. Компоненты имеют доступ ко всем функциям директив, по-прежнему имеют элемент хоста, могут определять свойства ввода и вывода и т. Д. Но они также определяют собственное содержимое.
Можно легко недооценить важность шаблона, но атрибуты и структурные директивы имеют ограничения. Директивы могут выполнять полезную и мощную работу, но они не имеют большого представления об элементах, к которым они применяются. Директивы наиболее полезны, когда они являются инструментами общего назначения, такими как
ngModel
директива, которая может применяться к любому свойству модели данных и любому элементу формы, независимо от того, для чего используются данные или элемент.Компоненты, напротив, тесно связаны с содержимым своих шаблонов. Компоненты предоставляют данные и логику, которые будут использоваться привязками данных, которые применяются к элементам HTML в шаблоне, которые обеспечивают контекст, используемый для оценки выражений привязки данных, и действуют как связующее звено между директивами и остальной частью приложения. Компоненты также являются полезным инструментом, позволяющим разбивать большие проекты Angular на управляемые блоки.
от официального углового
из книги Pro-Angular
источник