각도의 @Component 데코레이터에 대한 깊은 이해

저자：Eve Cole 업데이트 시간：2022-08-08 13:22:10

Component는 클래스를 Angular 구성 요소로 표시하는 데 사용되는 데코레이터인 Directive의 하위 클래스입니다. 다음 기사는 각도의 @Component 데코레이터에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.

1. `@Component` 데코레이터

1.1 @Component 데코레이터 의 목적

컴포넌트를 선언할 때 @Component 데코레이터를 컴포넌트 클래스에 사용하여 Angular에 이것이 컴포넌트임을 알려야 합니다. [관련 튜토리얼 권장사항: "angular 튜토리얼"]

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

@요소({
  선택기: 'app-product-alerts',
  templateUrl: './product-alerts.comComponent.html',
  styleUrls: ['./product-alerts.comComponent.css']
})
내보내기 클래스 ProductAlertsComponent는 OnInit를 구현합니다.

  생성자() { }

  ngOnInit() {
  }

}

1.2 @Component 데코레이터 의 일반적인 옵션

@Component 데코레이터는 Directive 에서 상속됩니다. 이 CSS 선택기는 템플릿의 지시어를 표시하고 지시어의 인스턴스화를 트리거하는 데 사용됩니다.

1.2.1继承自@Directive装饰器的选项

트리거하는 데 사용됩니다. .

유형	설명	선택기
문자열	CSS	선택기 이름, 템플릿에서 지시문(구성 요소)을 표시하고 해당 인스턴스화
입력을	string[]	Angular는 변경 감지 중에 자동으로 입력 속성을 업데이트합니다. inputs 속성은 directiveProperty에서 바인딩Property를 가리키는 구성 항목 집합을 정의합니다. · directiveProperty는 값이 기록될 지시문 내의 속성을 지정하는 데 사용됩니다. · 바인딩Property는 값을 읽어올 DOM 속성을 지정하는 데 사용됩니다. BindingProperty가 제공되지 않는 경우 directiveProperty와 동일한 것으로 간주됩니다.
출력	string[]	이벤트 바인딩을 위한 출력 속성 집합입니다. 출력 속성이 이벤트를 내보내면 이벤트에 연결된 템플릿의 핸들러가 호출됩니다. 각 출력 속성은 directiveProperty를 바인딩 속성에 매핑합니다. · directiveProperty는 이벤트를 발생시키는 구성 요소 속성을 지정합니다. · 바인딩Property는 이벤트 핸들러가 연결될 HTML 속성을 지정합니다.
Provider[]	서비스 공급자의 컬렉션	입니다
importAs	string	이 지시문을 템플릿의 변수에 할당하는 데 사용할 수 있는 하나 이상의 이름입니다. 이름이 여러 개인 경우 쉼표로 구분하세요.
쿼리	{[key:string]:any}는	이 지시문에 삽입될 일부 쿼리를 구성합니다. 콘텐츠 쿼리는 ngAfterContentInit 콜백을 호출하기 전에 설정됩니다. 뷰 쿼리는 ngAfterViewInit 콜백을 호출하기 전에 설정됩니다.
jit	true	true인 경우 명령어/구성 요소는 AOT 컴파일러에서 무시되므로 항상 JIT 컴파일됩니다. 이 옵션은 향후 Ivy 컴파일러를 지원하기 위한 것이며 아직 효과가 없습니다.
호스트	{[key:string]:string}은	키-값 쌍 세트를 사용하여 클래스 속성을 호스트 요소 바인딩(속성, 속성 및 이벤트)에 매핑합니다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 확인합니다. 바인딩된 값이 변경되면 Angular는 지시문의 호스트 요소를 업데이트합니다. 키가 호스트 요소의 속성인 경우 속성 값은 지정된 DOM 속성으로 전파됩니다. 키가 DOM의 정적 속성인 경우 속성 값은 호스트 요소에 지정된 속성으로 전파됩니다. 이벤트 처리의 경우: · 해당 키는 명령이 수신하려는 DOM 이벤트입니다. 글로벌 이벤트를 청취하려면 이벤트 이름 앞에 듣고 싶은 타겟을 추가하세요. 대상은 창, 문서 또는 본문일 수 있습니다. · 해당 값은 이벤트 발생 시 실행될 명령문입니다. 이 명령문이 false를 반환하면 이 DOM 이벤트의 PreventDefault 함수가 호출됩니다. 이 명령문에서는 로컬 변수 $event를 참조하여 이벤트 데이터를 얻을 수 있습니다.

1.2.2 @Component自己特有的选项

구성 요소 . 은

옵션	유형	설명
changeDetection	ChangeDetectionStrategy	구성 요소가 인스턴스화되면 Angular는 구성 요소의 각 바인딩 값에 대한 변경 사항을 전파하는 변경 감지기를 생성합니다. 정책은 다음 값 중 하나입니다. · ChangeDetectionStrategy#OnPush(0)는 전략을 CheckOnce(요청 시)로 설정합니다. · ChangeDetectionStrategy#Default(1)는 전략을 CheckAlways로 설정합니다.
viewProviders	Provider[]는	보기의 각 하위 노드에서 사용할 수 있는 주입 가능한 개체 집합을 정의합니다.
moduleId	문자열에는	구성 요소가 포함된 모듈의 ID가 포함됩니다. 구성요소는 템플릿과 스타일시트에 사용된 상대 URL을 확인할 수 있어야 합니다. SystemJS는 모든 모듈에서 __moduleName 변수를 내보냅니다. CommonJS에서는 module.id로 설정할 수 있습니다.
templateUrl	string	구성 요소 템플릿 파일의 URL입니다. 제공되는 경우 템플릿을 사용하여 인라인 템플릿을 제공하지 마세요.
템플릿	문자열	의 인라인 템플릿입니다	제공된 경우 templateUrl을 사용하여 템플릿을 제공하지 마세요.
styleUrls	string[]	이 구성 요소의 CSS 스타일 시트가 포함된 파일을 가리키는 하나 이상의 URL입니다.
styles	string[]	이 구성 요소에서 사용되는 하나 이상의 인라인 CSS 스타일입니다.
animations	any[]	일부 state() 및 Transition() 정의를 포함하는 하나 이상의 애니메이션 Trigger() 호출입니다.
캡슐화	ViewEncapsulation	은 템플릿과 CSS 스타일에서 사용되는 스타일 캡슐화 전략입니다. 값은 다음과 같습니다. · ViewEncapsulation.ShadowDom: Shadow DOM을 사용합니다. Shadow DOM을 기본적으로 지원하는 플랫폼에서만 작동합니다. · ViewEncapsulation.Emulated: 기본 동작을 에뮬레이트하기 위해 shim된 CSS를 사용합니다. · ViewEncapsulation.None: 캡슐화 없이 전역 CSS를 사용합니다. 제공되지 않으면 CompilerOptions에서 값을 가져옵니다. 기본 컴파일러 옵션은 ViewEncapsulation.Emulated입니다. 정책이 ViewEncapsulation.Emulated로 설정되어 있고 구성 요소가 스타일이나 styleUrls를 지정하지 않으면 자동으로 ViewEncapsulation.None으로 전환됩니다.
보간	[문자열, 문자열]	보간 표현식의 기본 시작 및 끝 구분 기호를 재정의합니다({ { 및 }})
EntryComponents	Array<Type	any[]>
PreserveWhitespaces	boolean	true인 경우 유지되고, false인 경우 가능한 추가 공백 문자가 컴파일된 템플릿에서 제거됩니다. 공백 문자는 JavaScript 정규식에서 s와 일치하는 문자입니다. 컴파일러 옵션을 통해 재정의되지 않는 한 기본값은 false입니다.

2. `selector` 선택기는

다음 형식 중 하나를 사용할 수 있습니다.

element-name :
요소 이름을 기반으로 [attribute] 선택:
속성 이름을 기반으로 .class 선택: 클래스 이름을 기반으로 [attribute=value] 선택
not(sub_selector) : 요소가 하위 선택기와 일치하지 않는 경우에만 selector1, selector2를 선택합니다. sub_selector
selector1, selector2

selector1 또는 selector2가 element-name 과 일치하면 2.1 이 선택됩니다. : select

@Component({
    선택기: '앱 요소',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

<app-element></app-element>

2.2 [attribute] :

@Component({
    선택기: '[앱 요소]',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

<div app-element></div>

2.3 .class :

@Component({를

선택합니다.

    선택기: '.app-element',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css']
})

<div class="app-element"></div>

3. `host` : `{[key:string]:string}`

키-값 쌍 세트를 사용하여 클래스 속성을 호스트 바인딩에 매핑합니다. 요소(속성, 속성 및 이벤트).
Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 확인합니다. 바인딩된 값이 변경되면 Angular는 지시문의 호스트 요소를 업데이트합니다.

키가 호스트 요소의 속성인 경우 속성 값은 지정된 DOM 속성으로 전파됩니다.
키가 DOM의 정적 속성인 경우 속성 값은 호스트 요소에 지정된 속성으로 전파됩니다.
속성 값의 기본값은 변수

입니다

. 속성 값을 직접 사용하는 경우 문자열에 작은따옴표나 큰따옴표를 추가해야 합니다. 변수는

이벤트 처리를 위해 구성 요소에서 직접 정의할 수 있습니다.

명령어가 모니터링하려는 DOM 이벤트입니다. 글로벌 이벤트를 청취하려면 이벤트 이름 앞에 듣고 싶은 타겟을 추가하세요. 대상은 창, 문서 또는 본문일 수 있습니다.
그 값은 이벤트가 발생할 때 실행될 명령문입니다. 이 명령문이 false를 반환하면 이 DOM 이벤트의 PreventDefault 함수가 호출됩니다. 이 명령문에서는 로컬 변수 $event를 참조하여 이벤트 데이터를 얻을 수 있습니다.

3.1 attribute 및 property

속성: DOM 요소는 childNodes, firstChild 등과 같은 객체에 첨부된 콘텐츠입니다.
속성: HTML 태그 속성은 DOM 노드와 함께 제공되는 속성입니다.

유사점과 차이점:

일부 속성은 속성과 속성 모두에 속합니다

예를 들어, id
속성은 초기화 후에 다시 초기화되지 않습니다. 속성의 기본값은 dom으로 업데이트됩니다.

따라서 각도 2의双向바인딩 구현은 dom 的property 과 같습니다. dom 的property 이므로 명령이 속성에 바인딩되지만 어떤 경우에는 colspan, rowspan 등과 같은 속성이 존재하지 않습니다. html 태그 속성을 바인딩하려면 attr :

<table을

사용해야 합니다.

width="100%" border="10px 솔리드">
  <tr>
    <th>월</th>
    <th>절감</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>1월</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>2월</td>
  </tr>
</table>

let colnum:number = 2;

3.2 host 사용 하여 class

@Component({
    선택기: '.app-element',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    주인: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // 호스트 요소도 element.comComponent.css 스타일을 사용하도록 합니다. 그렇지 않으면 CSS 오염을 방지하기 위해 기본적으로 캡슐이 사용됩니다.
})
내보내기 클래스 AppElementComponent {
  @Input() useDefault = true;
}

<div class="app-element"></div>

3.3 host 바인딩 style

@Component({
    선택기: '.app-element',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    주인: {
        '[스타일.배경]': '입력배경'
    }
})
내보내기 클래스 AppElementComponent {
  @Input() inputBackground = '빨간색';
}

<div class="app-element"></div>

3.4 host 사용하여 이벤트 바인딩

@Component({
    선택기: '.app-element',
    템플릿: './element.comComponent.html',
    styleUrls: ['./element.comComponent.css'],
    주인: {
        '(클릭)': 'onClick($event)'
    }
})
내보내기 클래스 AppElementComponent {
  공개 onClick($event) {
    console.log($event);
  }
}

<div class="app-element"></div>

4. `encapsulation` (encapsulation)

템플릿과 CSS 스타일에 대한 스타일 캡슐화 전략.

4.1 웹 구성 요소는

표준화되고 방해가 되지 않는 방식으로 구성 요소를 캡슐화합니다. 각 구성 요소는 페이지의 다른 요소不会干扰하지 않고 자체 HTML 구조, CSS 스타일 및 JavaScript 코드를 구성할 수 있습니다.

웹 구성 요소는 다음 네 가지 기술로 구성됩니다.

사용자 정의 요소: 사용자 정의 요소 HTML
템플릿: HTML 템플릿
Shadow DOM: Shadow DOMHTML
가져오기: HTML 가져오기

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<머리>
    <meta charset="UTF-8">
    <title>섀도우 DOM</title>
    <스타일 유형="텍스트/css">
        .shadowroot_son {
            색상: #f00;
        }
    </style>
</head>
<본문>
<p>나는 Shadow Host에 있지 않습니다</p>
<div>안녕하세요, 세상!</div>
<스크립트>
 // 섀도우 호스트
 var ShadowHost = document.querySelector('.shadowhost');
 // 섀도우 루트 생성(섀도우 루트)
 var ShadowRoot = ShadowHost.createShadowRoot();
 // 섀도우 루트는 섀도우 트리의 첫 번째 노드이고 p 노드와 같은 다른 노드는 자식 노드입니다.
 ShadowRoot.innerHTML = '<p>나는 섀도우 호스트에 있습니다</p>';
</script>
</body>
<html>

4.3 ViewEncapsulation

ViewEncapsulation을 사용하면 세 가지 선택 값을 설정할 수 있습니다.

ViewEncapsulation.Emulated: Shadow DOM은 없지만 Angular에서 제공하는 스타일 패키징 메커니즘을 통해 구성 요소가 캡슐화되므로 구성 요소의 스타일이 외부 영향에 영향을 받지 않습니다. 이는 Angular의 기본 설정입니다.
ViewEncapsulation.ShadowDom: 기본 Shadow DOM 기능 사용
ViewEncapsulation.None: Shadow DOM 및 스타일 패키징 없음

4.3.1 ViewEncapsulation.None

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

@요소({
  선택기: '내 앱',
  템플릿: `
    <h4>Angular 세계에 오신 것을 환영합니다</h4>
    <p class="greet">안녕하세요 {{name}}</p>
  `,
  스타일: [`
    .환영하다 {
      배경: #369;
      색상: 흰색;
    }
  `],
  캡슐화: ViewEncapsulation.None // 없음 ShadowDom |
})
내보내기 클래스 AppComponent {
  이름: 문자열 = 'Semlinker';
}

ViewEncapsulation.None 을 설정한 결과 Shadow DOM 이 없으며 모든 스타일이整个document 에 적용됩니다. 즉, 구성 요소의 스타일이受外界影响覆盖쓰여질 수 있습니다.

4.3.2 ViewEncapsulation.Emulated

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

@요소({
  선택기: '내 앱',
  ...,
  캡슐화: ViewEncapsulation.Emulated // 없음 ShadowDom |
})
내보내기 클래스 AppComponent {
  이름: 문자열 = 'Semlinker';
}

ViewEncapsulation.Emulated 설정 결과 Shadow DOM 없지만 Angular 에서 제공하는样式包装机制통해 컴포넌트를 캡슐화하므로 컴포넌트의 스타일이不受外部影响. 스타일은 여전히整个document 에 적용되지만 Angular는 .greet 클래스에 대해 [_ngcontent-cmy-0] 선택기를 만듭니다.为组件定义的样式，被Angular 修改了알 수 있습니다. 그 중 _nghost-cmy- 和_ngcontent-cmy-实现局部的样式데 사용됩니다.

4.3.3 ViewEncapsulation.ShadowDom

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

@요소({
  선택기: '내 앱',
  ...,
  캡슐화: ViewEncapsulation.ShadowDom // 없음 |
})
내보내기 클래스 AppComponent {
  이름: 문자열 = 'Semlinker';
}

ViewEncapsulation.ShadowDom 설정의 결과는 기본 Shadow DOM 기능을 사용하는 것입니다. Angular는 브라우저에서 지원하는 Shadow DOM 形式渲染.

각도의 @Component 데코레이터에 대한 깊은 이해

1. @Component 데코레이터

2. selector 선택기는

3. host : {[key:string]:string}

4. encapsulation (encapsulation)

1. `@Component` 데코레이터

2. `selector` 선택기는

3. `host` : `{[key:string]:string}`

4. `encapsulation` (encapsulation)