@Directive vs @Component in Angular

@Directive vs @Component in Angular

@Component ★★★★★★★★★★★★★★★★★」@Directive 각진? 두 다 같은 있는 것 요.둘 다 같은 작업을 하고 같은 속성을 가진 것 같습니다.

어떤 사용 사례와 다른 사용 사례보다 하나를 더 선호해야 합니까?

@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 요소를 보완하기 위해 재사용 가능한 동작을 기술하는 경우 지시문을 작성합니다.

출처:

• @지시 매뉴얼
• @컴포넌트 매뉴얼
• 도움이 되는 블로그 투고

구성 요소들

1. 하려면 , 「컴포넌트 등록」을합니다.@Component메타 데이터 주석
2. 컴포넌트는 섀도 DOM을 사용하여 컴포넌트라고 불리는 캡슐화된 비주얼 동작을 만드는 지시어입니다.일반적으로 구성요소는 UI 위젯을 작성하는 데 사용됩니다.
3. 컴포넌트는 응용 프로그램을 더 작은 컴포넌트로 분할하는 데 사용됩니다.
4. 각 DOM 요소에는 1개의 컴포넌트만 존재할 수 있습니다.
5. @View데코레이터 또는 templateurl 템플릿은 컴포넌트에서 필수입니다.

지시.

1. 하려면 , 「Directions」를 사용합니다.@Directive메타 데이터 주석
2. 디렉티브는 동작을 기존 DOM 요소에 추가하기 위해 사용됩니다.
3. 디렉티브는 재사용 가능한 컴포넌트를 설계하기 위해 사용됩니다.
4. DOM 요소당 다수의 디렉티브를 사용할 수 있습니다.
5. 지시문은 보기를 사용하지 않습니다.

출처:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

및 "" 입니다.@Component '장식사'다@Directive템플릿 지향 기능으로 확장된 데코레이터.

Angular 2 이상에서는 "모든 것이 구성요소입니다."컴포넌트는 기존 컴포넌트에 기능을 추가하는 커스텀 요소와 속성을 모두 사용하여 페이지에 요소와 로직을 구축하고 지정하는 주요 방법입니다.

http://learnangular2.com/components/

하지만 Angular2+에서는 어떤 지시사항이 있습니까?

속성 지시어는 동작을 요소에 부가합니다.

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

1. 컴포넌트: 템플릿을 사용하여 지시합니다.
2. 구조 지시: DOM 요소를 추가 및 삭제하여 DOM 레이아웃을 변경합니다.
3. Attribute Directives: 요소, 컴포넌트 또는 다른 디렉티브의 외관 또는 동작을 변경합니다.

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에서 태그를 사용하면 이 구성 요소가 생성되고 생성자가 호출되어 렌더링됩니다.

프로그래밍 컨텍스트에서 지시어는 컴파일러가 입력을 처리하는 방법을 변경하도록 지시한다. 즉, 일부 동작을 변경한다.

「지시는, DOM내의 요소에 동작을 부가할 수 있도록 합니다.」

지시문은 다음 3가지 범주로 나뉩니다.

• 기여하다
• 구조
• 요소

예, 각도 2에서 구성요소는 지침의 한 유형입니다.의사 선생님 말씀에 따르면

"각형 구성요소는 지시어의 하위 집합입니다.디렉티브와 달리 컴포넌트에는 항상 템플릿이 있으며 템플릿의 요소당 하나의 컴포넌트만 인스턴스화할 수 있습니다."

Angular 2 Components는 Web Components웹 컴포넌트는 몇 가지 개별 테크놀로지로 구성됩니다.웹 구성요소는 개방형 웹 기술을 사용하여 작성된 재사용 가능한 사용자 인터페이스 위젯이라고 생각할 수 있습니다.

• 요약지시 구조, 속성 및 컴포넌트 유형으로 구성된 DOM 요소에 동작을 부가하는 메커니즘입니다.
• 컴포넌트는 웹 컴포넌트 기능인 AKA 재사용성을 응용 프로그램 전체에서 사용할 수 있는 캡슐화된 재사용 가능한 요소를 활용할 수 있는 특정 유형의 지시입니다.

구성 요소들

구성 요소는 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.displate 뷰:

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>

디렉티브 상세보기

이것은 Angular 13의 최신 업데이트입니다.

@Component는 @Directive의 서브클래스일 뿐입니다.자세히 알아보기 전에 @Direction이 무엇인지 알아야 합니다.

@Directive는 새로운 요소를 추가하거나 기존 요소를 삭제 또는 수정하도록 DOM에 지시하기 위해 사용되는 데코레이터입니다.따라서 Angular는 데코레이터를 발견할 때마다 런타임에 데코레이터를 처리하고 그에 따라 DOM을 수정합니다.

아래와 같이 @Directive를 사용하여 디렉티브를 작성할 수 있습니다.

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

HTML에서의 사용방법

<button demoButtonColor>RED BUTTON</button>

이제 @Component decorator가 무엇인지 알아보겠습니다.

@Component는 @Directive의 서브클래스이며, 1개의 추가 기능이 있습니다.@Component를 사용하면 실행 시 DOM에 삽입할 수 있는HTML 템플릿을 만들 수 있습니다.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

아래와 같이 다른 컴포넌트에서 재사용할 수 있습니다.

<div>
  <demo-color></demo-color>
</div>

이것을 정리하려면 , @Directive 를 사용해 DOM 의 요소 또는 구조를 변경하는 커스텀 디렉티브를 작성합니다.커스텀 동작으로 재사용 가능한 UI 컴포넌트를 작성하려면 @Component를 사용합니다.

변경 검출

만.@Component는 변경 검출 트리의 노드일 수 있습니다., ㄴ, ㄹ 수 없다라는 것을 할 수 .ChangeDetectionStrategy.OnPushin a a a a @Directive는 'Direction'을 가질 수 @Input ★★★★★★★★★★★★★★★★★」@Output및 호스트 컴포넌트의 및 합니다.ChangeDetectorRef트리에 한 경우 요소를 사용하십시오.따라서 변경 감지 트리에 대한 세부적인 제어가 필요한 경우 구성 요소를 사용하십시오.

공식 각선 도서를 참조할 수 있습니다.

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

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

1. 컴포넌트: 템플릿을 사용하여 지시합니다.
2. 구조 지시—DOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경합니다(예: *ngIf).
3. 속성 디렉티브: 요소, 컴포넌트 또는 다른 디렉티브(예: [ngClass])의 외관 또는 동작을 변경합니다.

애플리케이션이 커짐에 따라 이러한 모든 코드를 유지하는 것이 어려워졌습니다.재사용을 위해 스마트 컴포넌트와 덤 컴포넌트로 논리를 분리하고 명령어(구조적 또는 속성)를 사용하여 DOM을 변경합니다.

컴포넌트는 뷰와 로직을 모두 캡슐화하는 단일 유닛이지만 디렉티브는 컴포넌트 또는 돔 요소의 동작을 향상시키는 데 사용되며 템플릿은 없습니다.

컴포넌트는 디렉티브를 확장하여 모든 컴포넌트가 디렉티브가 됩니다.

• 컴포넌트와 디렉티브 모두 라이프 사이클 훅, 입력, 출력, 공급자 및 쿼리를 가질 수 있습니다.
• 컴포넌트는 뷰 공급자, 변경된 검출 전략, 템플릿, 스타일 및 뷰 캡슐화를 추가로 가질 수 있습니다.

컴포넌트를 사용하여 기능 요소를 구축하고 명령어를 사용하여 요소의 커스터마이즈를 작성할 수 있습니다.

지시:

디렉티브는 요소에 동작을 추가하는 클래스입니다.

다양한 유형의 지시사항은 다음과 같습니다.

1. 컴포넌트:이 지시문에는 템플릿이 포함되어 있습니다.
2. 속성 지시어:이러한 유형의 지시 변경 뷰 또는 요소, 구성 요소, 기타 지시의 동작
3. 구조 지시:이러한 지시어는 DOM 요소를 추가하거나 삭제하여 DOM 레이아웃을 변경합니다.

가장 간단한 답변

구성요소: 일부 DOM 요소/Html을 추가하는 데 사용되는 기본 구성요소입니다.

지시:DOM 요소/HTML에서 일부 식, 조건 및 루프를 추가하기 위해 사용됩니다.

언급URL : https://stackoverflow.com/questions/32680244/directive-vs-component-in-angular