[angular] 각도의 @Directive와 @Component

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

답변

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