각도의 @Directive와 @Component

Angular @Component와 @DirectiveAngular 의 차이점은 무엇입니까 ? 둘 다 동일한 작업을 수행하고 동일한 속성을 갖는 것 같습니다.

사용 사례는 무엇이며 언제 다른 것을 선호합니까?

@Component에는 뷰가 필요하지만 @Directive에는 필요하지 않습니다.

지시어

옵션을 사용하여 @Directive를 Angular 1.0 지시문에 비유합니다restrict: 'A' (지시문은 속성 사용으로 제한되지 않습니다.) 지시문은 기존 DOM 요소 또는 기존 구성 요소 인스턴스에 동작을 추가합니다. 지시문의 사용 사례 중 하나는 요소에 대한 클릭을 기록하는 것입니다.

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 문서
• 유용한 블로그 게시물

구성 요소

1. 컴포넌트를 등록하기 위해 @Component메타 데이터 주석을 사용합니다.
2. 컴포넌트는 shadow DOM을 사용하여 컴포넌트라는 캡슐화 된 시각적 동작을 작성하는 지시문입니다. 컴포넌트는 일반적으로 UI 위젯을 작성하는 데 사용됩니다.
3. 구성 요소는 응용 프로그램을 더 작은 구성 요소로 나누는 데 사용됩니다.
4. DOM 요소 당 하나의 구성 요소 만 존재할 수 있습니다.
5. @View 구성 요소에는 데코레이터 또는 templateurl 템플리트가 필수입니다.

지령

1. 지시문을 등록하기 위해 @Directive메타 데이터 주석을 사용합니다.
2. 지시문은 기존 DOM 요소에 동작을 추가하는 데 사용됩니다.
3. 지시문은 재사용 가능한 구성 요소를 설계하는 데 사용됩니다.
4. DOM 요소 당 많은 지시문을 사용할 수 있습니다.
5. Directive는 View를 사용하지 않습니다.

출처 :

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

구성 요소는 템플릿이 포함 된 지시문이며 @Component데코레이터는 실제로 @Directive템플릿 지향 기능으로 확장 된 데코레이터입니다.

Angular 2 이상에서는“모든 것이 구성 요소입니다.” 컴포넌트는 기존 컴포넌트에 기능을 추가하는 사용자 정의 요소 및 속성을 통해 페이지에서 요소 및 로직을 빌드하고 지정하는 주요 방법입니다.

http://learnangular2.com/components/

그러나 Angular2 +에서 어떤 지시문이 있습니까?

속성 지시문은 요소에 동작을 첨부합니다.

Angular에는 세 가지 종류의 지시문이 있습니다.

1. 컴포넌트 — 템플릿이있는 지시어.
2. 구조적 지시문 —DOM 요소를 추가하고 제거하여 DOM 레이아웃을 변경합니다.
3. 속성 지시문 — 요소, 구성 요소 또는 다른 지시문의 모양이나 동작을 변경합니다.

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에서 구성 요소는 지시문 유형입니다. Doc에 따르면

“앵귤러 컴포넌트는 지시문의 하위 세트입니다. 지시문과 달리 구성 요소에는 항상 템플릿이 있으며 템플릿의 요소 당 하나의 구성 요소 만 인스턴스화 할 수 있습니다.”

Angular 2 컴포넌트는 웹 컴포넌트 개념 의 구현입니다 . 웹 구성 요소는 여러 가지 개별 기술로 구성됩니다. 웹 구성 요소는 개방형 웹 기술을 사용하여 작성된 재사용 가능한 사용자 인터페이스 위젯으로 생각할 수 있습니다.

• 요약 지시문 에서는 구조, 속성 및 구성 요소 유형으로 구성된 DOM의 요소에 동작 을 연결하는 메커니즘 입니다.
• 구성 요소는 웹 구성 요소 기능인 AKA 재사용 성 (캡슐화되고 재사용 가능한 요소)을 응용 프로그램 전체 에서 사용할 수있게하는 특정 유형의 지시어입니다 .

공식 각도 문서를 참조하면

https://angular.io/guide/attribute-directives

Angular에는 세 가지 종류의 지시문이 있습니다.

1. 컴포넌트 — 템플릿이있는 지시어.
2. 구조적 지시문 —DOM 요소를 추가하고 제거하여 DOM 레이아웃을 변경합니다. 예 : * ngIf
3. 속성 지시문 — 요소, 구성 요소 또는 다른 지시문의 모양이나 동작을 변경합니다. 예를 들어 [ngClass].

응용 프로그램이 커지면 이러한 모든 코드를 유지 관리하는 데 어려움이 있습니다. 재사용을 위해 스마트 구성 요소와 벙어리 구성 요소에서 논리를 분리하고 지시문 (구조 또는 속성)을 사용하여 DOM을 변경합니다.

구성 요소

구성 요소는 Angular 앱의 가장 기본적인 UI 빌딩 블록입니다. Angular 앱에는 Angular 구성 요소 트리가 포함되어 있습니다. Angular의 애플리케이션은 컴포넌트 트리를 기반으로합니다 . 모든 구성 요소에는 템플릿, 스타일, 수명주기, 선택기 등이 있어야합니다. 따라서 모든 구성 요소에는 구조가 있습니다. 자체 템플릿과 논리를 사용하여 다른 독립형 소규모 웹 응용 프로그램으로 취급하고 다른 요소와 통신하고 함께 사용할 수 있습니다 구성 요소.

구성 요소의 샘플 .ts 파일 :

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

./app.component.html 템플릿보기 :

Hello {{title}}

그런 다음 AppTrainingComponent 템플리트를 다른 컴포넌트의 로직으로 렌더링 할 수 있습니다 (모듈에 추가 한 후).

<div>
   <app-training></app-training>
</div>

결과는

<div>
   my-app-training
</div>

AppTrainingComponent가 여기에서 렌더링 된 것처럼

구성 요소에 대해 더 알아 보기

지시어

지시문은 기존 DOM 요소의 모양이나 동작을 변경합니다. 예를 들어 [ngStyle]은 지시문입니다. 지시문 은 구성 요소를 확장 할 수 있지만 (내부에서 사용할 수 있음) 전체 응용 프로그램을 빌드하지는 않습니다 . 구성 요소 만 지원한다고 가정 해 봅시다. 그것들은 자체 템플릿을 가지고 있지 않습니다 (물론, 당신은 그들과 함께 템플릿을 조작 할 수 있습니다).

샘플 지시문 :

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

그리고 그 사용법 :

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

지시문에 대해 더 알아 보기