[javascript] @Directive v / s @Component in Angular


Answers

구성 요소

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

지령

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

출처 :

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

Question

@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 = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

다음과 같이 사용할 수 있습니다.

<my-component></my-component>

HTML에서 태그를 사용하면이 구성 요소가 생성되고 생성자가 호출되어 렌더링됩니다.




Related