Component는 Directive의 하위 클래스로 클래스를Angular구성 요소로 표시하는 데 사용됩니다. 다음 기사는 각도의 @Component 데코레이터에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.
@Component
데코레이터@Component
装饰器1.1@Component
装饰器的用途
声明一个组件时,在组件类的之上要用@Component装饰器来告知Angular这是一个组件。【相关教程推荐:《angular教程》】
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit { constructor() { } ngOnInit() { } }
1.2@Component
装饰器的常用选项
@Component
装饰器继承于Directive
,这个css选择器用于在模板中标记出该指令,并触发该指令的实例化。
1.2.1继承自@Directive装饰器的选项
@Component
데코레이터의 목적
@Component
에서 상속됩니다. 지시문
1.2.2@Component自己特有的选项
angular tutorial | "]
@Component({ selector: 'app-element', template: './element.component.html', styleUrls: ['./element.component.css'] })
로그인 후 복사
로그인 후 복사
|
1.2 @Component 데코레이터의 공통 옵션 |
---|---|---|
inputs | string[] | Angular는 변경 감지 중에 입력 속성을 자동으로 업데이트하는 데 사용됩니다. inputs 속성은 directiveProperty에서 바인딩Property를 가리키는 구성 항목 집합을 정의합니다. |
outputs | string[] | 이벤트 바인딩을 위한 출력 속성 집합입니다. 출력 속성이 이벤트를 내보내면 이벤트에 연결된 템플릿의 핸들러가 호출됩니다. 각 출력 속성은 directiveProperty를 바인딩 속성에 매핑합니다.
|
provides | Provider[] | 서비스 공급자 모음
|
exportAs | string | 템플릿의 변수에 이 지시문을 할당하는 데 사용할 수 있는 하나 이상의 이름입니다. 이름이 여러 개인 경우 쉼표로 구분하세요. |
queries | {[key:string]:any} | 이 지시문에 삽입될 일부 쿼리를 구성합니다. 콘텐츠 쿼리는 ngAfterContentInit 콜백을 호출하기 전에 설정됩니다. 뷰 쿼리는 ngAfterViewInit 콜백을 호출하기 전에 설정됩니다. |
jit | true | true인 경우 지시문/구성 요소는 AOT 컴파일러에서 무시되므로 JIT 컴파일만 됩니다. 이 옵션은 향후 Ivy 컴파일러를 지원하기 위한 것이며 아직 효과가 없습니다. |
host | {[key:string]:string} | 키-값 쌍 세트를 사용하여 클래스의 속성을 호스트 요소(속성, 속성 및 이벤트)의 바인딩에 매핑합니다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 확인합니다. 바인딩된 값이 변경되면 Angular는 지시문의 호스트 요소를 업데이트합니다. 키가 호스트 요소의 속성인 경우 속성 값은 지정된 DOM 속성으로 전파됩니다. 키가 DOM의 정적 속성인 경우 속성 값은 호스트 요소에 지정된 속성으로 전파됩니다. 이벤트 처리의 경우: |
Options | Type | Description | ||||
---|---|---|---|---|---|---|
changeDetection | ChangeDetectionStrategy | 구성 요소가 인스턴스화되면 ular는 구성 요소 변경 사항 전파를 담당하는 변경 감지기를 만듭니다. 개별 바인딩 값에서. 전략은 다음 값 중 하나입니다. · ChangeDetectionStrategy#OnPush(0) 전략을 CheckOnce(요청 시)로 설정합니다. · ChangeDetectionStrategy#Default(1) 전략을 CheckAlways로 설정합니다. |
||||
viewProviders | Provider[] | 뷰의 다양한 하위 노드에서 사용할 수 있는 주입 가능한 객체 세트를 정의합니다. | ||||
moduleId | string | 이 구성 요소를 포함하는 모듈의 ID입니다. 구성요소는 템플릿과 스타일시트에 사용된 상대 URL을 확인할 수 있어야 합니다. SystemJS는 모든 모듈에서 __moduleName 변수를 내보냅니다. CommonJS에서는 module.id로 설정할 수 있습니다. | ||||
templateUrl | string | 구성 요소 템플릿 파일의 URL입니다. 제공되는 경우 템플릿을 사용하여 인라인 템플릿을 제공하지 마세요. | ||||
template | string | 구성 요소용 인라인 템플릿입니다. 제공된 경우 templateUrl을 사용하여 템플릿을 제공하지 마세요. | ||||
styleUrls | string[] | 이 구성 요소의 CSS 스타일 시트가 포함된 파일을 가리키는 하나 이상의 URL입니다. | ||||
styles | string[] | 이 구성요소에서 사용되는 하나 이상의 인라인 CSS 스타일입니다. | ||||
animations | any[] | 일부 state() 및 Transition() 정의를 포함하여 하나 이상의 애니메이션 Trigger() 호출. | ||||
encapsulation | ViewEncapsulation | 템플릿 및 CSS 스타일에 대한 스타일 캡슐화 전략. 값은 다음과 같습니다. · ViewEncapsulation.ShadowDom: Shadow DOM을 사용합니다. Shadow DOM을 기본적으로 지원하는 플랫폼에서만 작동합니다. · ViewEncapsulation.Emulated: shim된 CSS를 사용하여 기본 동작을 에뮬레이트합니다. · ViewEncapsulation.None: 캡슐화 없이 전역 CSS를 사용합니다. 제공되지 않은 경우 값은 CompilerOptions에서 가져옵니다. 기본 컴파일러 옵션은 ViewEncapsulation.Emulated입니다. 정책이 ViewEncapsulation.Emulated로 설정되어 있고 구성 요소가 스타일이나 styleUrls를 지정하지 않으면 자동으로 ViewEncapsulation.None으로 전환됩니다. |
||||
interpolationol [string, string] default 기본 보간 표현식 시작 및 종료 구분 자 ({ | {{and}})entrycomponents | |||||
Any [] & gt; | preserveWhitespaces | |||||
true이면 보존되고, false이면 가능한 추가 공백 문자가 컴파일된 템플릿에서 제거됩니다. 공백 문자는 JavaScript 정규식에서 s와 일치하는 문자입니다. 컴파일러 옵션을 통해 재정의되지 않는 한 기본값은 false입니다. | 二、 |
Month | Savings |
---|---|
January | |
February |
3.2 使用host
绑定class
@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '[class.default-class]': 'useDefault' }, encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则,默认胶囊封装避免CSS污染。 }) export class AppElementComponent { @Input() useDefault = true; }
3.3 使用host
绑定style
@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '[style.background]': 'inputBackground' } }) export class AppElementComponent { @Input() inputBackground = 'red'; }
3.4 使用host
绑定事件
@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '(click)': 'onClick($event)' } }) export class AppElementComponent { public onClick($event) { console.log($event); } }
encapsulation
(封装)供模板和 CSS 样式使用的样式封装策略。
4.1 Web Components
通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码,并且不会干扰
页面上的其他元素。
Web Components 由以下四种技术组成:
4.2 Shadow DOM
Shadow DOM 我不在 Shadow Host内
Hello, world!
4.3ViewEncapsulation
ViewEncapsulation 允许设置三个可选的值:
4.3.1ViewEncapsulation.None
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', template: `Welcome to Angular World
Hello {{name}}
`, styles: [` .greet { background: #369; color: white; } `], encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }
ViewEncapsulation.None
设置的结果是没有Shadow DOM
,并且所有的样式都应用到整个
document
,换句话说,组件的样式会受外界影响
,可能被覆盖
掉。
4.3.2ViewEncapsulation.Emulated
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', ..., encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }
ViewEncapsulation.Emulated
设置的结果是没有Shadow DOM
,但是通过Angular
提供的样式包装机制
来封装组件,使得组件的样式不受外部影响
。虽然样式仍然是应用到整个 document
,但 Angular 为.greet
类创建了一个[_ngcontent-cmy-0]
选择器。可以看出,我们为组件定义的样式,被 Angular 修改了
。其中的_nghost-cmy- 和 _ngcontent-cmy-
用来实现局部的样式
。
4.3.3ViewEncapsulation.ShadowDom
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', ..., encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }
ViewEncapsulation.ShadowDom
设置的结果是使用原生的Shadow DOM
特性。Angular 会把组件按照浏览器支持的Shadow DOM 形式渲染
。
更多编程相关知识,请访问:编程视频!!
위 내용은 각도의 @Component 데코레이터에 대한 깊은 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!