차이점은 무엇입니까?@Component과@Directive각도로?
둘 다 똑같은 일을하고 같은 속성을 가진 것처럼 보입니다.
유스 케이스는 무엇이며 언제 다른 유스 케이스를 선호합니까?
@Component에는보기가 필요하지만 @Directive에는보기가 필요하지 않습니다.
나는 Option과 함께 Angular 1.0 지시어에 @Directive를 비유한다.지시문은 특성 사용에 제한되지 않습니다. 지시문은 기존 DOM 요소 또는 기존 구성 요소 인스턴스에 비헤이비어를 추가합니다. 지시어에 대한 사용 예는 요소에 클릭을 기록하는 것입니다.restrict: 'A'
import {Directive} from '@angular/core';
@Directive({
selector: "[logOnClick]",
hostListeners: {
'click': 'onClick()',
},
})
class LogOnClick {
constructor() {}
onClick() { console.log('Element clicked!'); }
}
다음과 같이 사용됩니다.
<button logOnClick>I log when clicked!</button>
비헤이비어를 추가 / 수정하는 대신 구성 요소는 실제로 동작을 첨부하여 자체 뷰 (DOM 요소의 계층 구조)를 만듭니다. 예를 들어 연락처 카드 구성 요소 일 수 있습니다.
import {Component, View} from '@angular/core';
@Component({
selector: 'contact-card',
template: `
<div>
<h1>{{name}}</h1>
<p>{{city}}</p>
</div>
`
})
class ContactCard {
@Input() name: string
@Input() city: string
constructor() {}
}
다음과 같이 사용됩니다.
<contact-card [name]="'foo'" [city]="'bar'"></contact-card>
ContactCard는 다른 구성 요소 내에서도 응용 프로그램의 어느 곳에서나 사용할 수있는 재사용 가능한 UI 구성 요소입니다. 이것들은 기본적으로 애플리케이션의 UI 구성 요소를 구성합니다.
사용자 정의 비헤이비어로 UI의 DOM 요소를 재사용 할 수있는 세트를 만들려는 경우 구성 요소를 작성하십시오. 기존 DOM 요소를 보충하기 위해 재사용 가능한 동작을 작성하려는 경우 지시문을 작성하십시오.
출처 :
구성 요소
@Component메타 데이터 주석.@View장식 자 또는 템플릿 탬플릿은 구성 요소에서 필수입니다.지령
@Directive메타 데이터 주석.출처 :
http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html
구성 요소는 템플릿이있는 지시문이며@Component데코레이터는 실제로@Directive데코레이터는 템플릿 지향 기능으로 확장되었습니다.
Angular 2 이상에서는 "모든 것이 구성 요소입니다." 페이지의 요소와 로직을 빌드하고 지정하는 주요 방법은 기능을 추가하는 맞춤 요소와 속성을 통해 기존 구성 요소.
http://learnangular2.com/components/
그러나 Angular2 +에서 어떤 지시어가 사용됩니까?
속성 지시문은 비헤이비어를 요소에 연결합니다.
Angular에는 세 가지 종류의 지시문이 있습니다.
- 구성 요소 - 템플릿이있는 지시.
- 구조 지시문 변경 DOM 요소를 추가하고 제거하여 DOM 레이아웃
- 속성 지시문 - 요소의 모양이나 동작을 변경합니다. 구성 요소 또는 다른 지시.
https://angular.io/docs/ts/latest/guide/attribute-directives.html
Angular2 이상에서 어떤 일이 발생합니까?지시문기능을 추가하는 속성입니다.집단과구성 요소들.
Angular.io에서 아래 샘플을보십시오.
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
그러면 노란색 배경을 추가하여 구성 요소와 HTML 요소를 확장하고 아래와 같이 사용할 수 있습니다.
<p myHighlight>Highlight me!</p>
그러나 구성 요소는 아래와 같이 모든 기능을 갖춘 완전한 요소를 생성합니다.
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div>Hello my name is {{name}}.
<button (click)="sayMyName()">Say my name</button>
</div>
`
})
export class MyComponent {
name: string;
constructor() {
this.name = 'Alireza'
}
sayMyName() {
console.log('My name is', this.name)
}
}
다음과 같이 사용할 수 있습니다.
<my-component></my-component>
HTML에서 태그를 사용하면이 구성 요소가 생성되고 생성자가 호출되어 렌더링됩니다.
만@Component변경 감지 트리의 노드 일 수 있습니다. 즉, 설정할 수 없습니다.ChangeDetectionStrategy.OnPush안에@Directive. 이 사실에도 불구하고, 지침에는@Input과@Output등록 정보를 삽입하고 조작 할 수 있습니다.ChangeDetectorRef그것에서. 변경 감지 트리를 세부적으로 제어해야하는 경우 구성 요소를 사용하십시오.
프로그래밍 컨텍스트에서 지시문은 컴파일러가 입력을 처리 (즉, 일부 동작 변경)하는 방법을 변경하도록 지침을 제공합니다.
"지시문을 사용하면 DOM의 요소에 동작을 첨부 할 수 있습니다."
지시문은 세 가지 범주로 나뉩니다.
예, Angular 2에서는 구성 요소가 Directive 유형입니다. 박사에 따르면,
"각 구성 요소는 지시문의 하위 집합입니다. 지시문과 달리 구성 요소에는 항상 템플릿이 있으며 템플릿의 요소 당 하나의 구성 요소 만 인스턴스화 할 수 있습니다. "
각도 2 컴포넌트는웹 구성 요소개념. 웹 구성 요소는 몇 가지 개별 기술로 구성됩니다. Web Components는 개방형 웹 기술을 사용하여 재사용 가능한 사용자 인터페이스 위젯으로 생각할 수 있습니다.
공식 각도 문서를 참조하는 경우
https://angular.io/guide/attribute-directives
Angular에는 세 가지 종류의 지시문이 있습니다.
응용 프로그램이 커지면서 이러한 모든 코드를 유지 관리하는 데 어려움이 있습니다. 재사용 성을 위해 우리는 스마트 컴포넌트와 바보 컴포넌트에서 로직을 분리하고 DOM에 변경을 가하기 위해 지시문 (구조 또는 속성)을 사용합니다.
@Component데코레이터는 실제로@Directive템플릿 지향 기능으로 확장 된 데코레이터 -출처. - Cosmin Ababeidirectives배열 ... 어쩌면 아래의 Lida Weng 주석은 구성 요소가 실제로 "확장 된 ' 지시문 ' " - Nobita