지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

青灯夜游
풀어 주다： 2022-05-30 11:14:27
앞으로
3118명이 탐색했습니다.

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

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

1. @Component 데코레이터@Component 装饰器

1.1 <span style="font-size: 18px;">@Component</span> 装饰器的用途

声明一个组件时，在组件类的之上要用@Component装饰器来告知Angular这是一个组件。【相关教程推荐：《angular教程》】

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-product-alerts&#39;,
  templateUrl: &#39;./product-alerts.component.html&#39;,
  styleUrls: [&#39;./product-alerts.component.css&#39;]
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
로그인 후 복사

1.2 <span style="font-size: 18px;">@Component</span> 装饰器的常用选项

@Component 装饰器继承于 Directive ，这个css选择器用于在模板中标记出该指令，并触发该指令的实例化。

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

1.1 <span 스타일 = "font-size: 18px;">@Component</span> 데코레이터의 목적컴포넌트를 선언할 때 @ Angular에게 이것이 컴포넌트임을 알리기 위해 컴포넌트 데코레이터를 컴포넌트 클래스에서 사용해야 합니다. [관련 튜토리얼 권장사항: ""]@Component 데코레이터는 에서 상속됩니다. 지시문, 이 CSS 선택기는 템플릿의 지시문을 표시하고 지시문의 인스턴스화를 트리거하는 데 사용됩니다. + 선택기 이름, 템플릿의 지시문(구성 요소)을 표시하고 인스턴스화inputsstring[]Angular는 변경 감지 중에 입력 속성을 자동으로 업데이트하는 데 사용됩니다. inputs 속성은 directiveProperty에서 바인딩Property를 가리키는 구성 항목 집합을 정의합니다. · directiveProperty는 작성할 지시문 내의 속성을 지정하는 데 사용됩니다. · 바인딩Property는 값을 읽어올 DOM 속성을 지정하는 데 사용됩니다. BindingProperty가 제공되지 않는 경우 directiveProperty와 동일한 것으로 간주됩니다. outputs이벤트 바인딩을 위한 출력 속성 집합입니다. 출력 속성이 이벤트를 내보내면 이벤트에 연결된 템플릿의 핸들러가 호출됩니다. 각 출력 속성은 directiveProperty를 바인딩 속성에 매핑합니다. · directiveProperty는 이벤트를 발생시키는 구성 요소 속성을 지정합니다. · 바인딩Property는 이벤트 핸들러가 연결될 HTML 속성을 지정합니다. provides서비스 공급자 모음 exportAsstring템플릿의 변수에 이 지시문을 할당하는 데 사용할 수 있는 하나 이상의 이름입니다. 이름이 여러 개인 경우 쉼표로 구분하세요. queries{[key:string]:any}이 지시문에 삽입될 일부 쿼리를 구성합니다. 콘텐츠 쿼리는 ngAfterContentInit 콜백을 호출하기 전에 설정됩니다. 뷰 쿼리는 ngAfterViewInit 콜백을 호출하기 전에 설정됩니다. jittruetrue인 경우 지시문/구성 요소는 AOT 컴파일러에서 무시되므로 JIT 컴파일만 됩니다. 이 옵션은 향후 Ivy 컴파일러를 지원하기 위한 것이며 아직 효과가 없습니다. host{[key:string]:string}키-값 쌍 세트를 사용하여 클래스의 속성을 호스트 요소(속성, 속성 및 이벤트)의 바인딩에 매핑합니다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 확인합니다. 바인딩된 값이 변경되면 Angular는 지시문의 호스트 요소를 업데이트합니다. 키가 호스트 요소의 속성인 경우 속성 값은 지정된 DOM 속성으로 전파됩니다. 키가 DOM의 정적 속성인 경우 속성 값은 호스트 요소에 지정된 속성으로 전파됩니다. 이벤트 처리의 경우: · 해당 명령이 수신하려는 DOM 이벤트가 핵심입니다. 글로벌 이벤트를 청취하려면 이벤트 이름 앞에 듣고 싶은 타겟을 추가하세요. 대상은 창, 문서 또는 본문일 수 있습니다. · 해당 값은 이벤트 발생 시 실행될 명령문입니다. 이 명령문이 false를 반환하면 이 DOM 이벤트의 PreventDefault 함수가 호출됩니다. 이 명령문에서는 로컬 변수 $event를 참조하여 이벤트 데이터를 얻을 수 있습니다.

1.2.2 @Component自己特有的选项

angular tutorial
@Component({
    selector: &#39;app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
로그인 후 복사
로그인 후 복사
1.2 <span style="font-size: 18px;"> @Component</span> 데코레이터의 공통 옵션

string[]

Provider[]
{{and}}) Array & lt; typeboolean
OptionsTypeDescription
changeDetectionChangeDetectionStrategy구성 요소가 인스턴스화되면 ular는 구성 요소 변경 사항 전파를 담당하는 변경 감지기를 만듭니다. 개별 바인딩 값에서. 전략은 다음 값 중 하나입니다.
· ChangeDetectionStrategy#OnPush(0) 전략을 CheckOnce(요청 시)로 설정합니다.
· ChangeDetectionStrategy#Default(1) 전략을 CheckAlways로 설정합니다.
viewProvidersProvider[]뷰의 다양한 하위 노드에서 사용할 수 있는 주입 가능한 객체 세트를 정의합니다.
moduleIdstring이 구성 요소를 포함하는 모듈의 ID입니다. 구성요소는 템플릿과 스타일시트에 사용된 상대 URL을 확인할 수 있어야 합니다. SystemJS는 모든 모듈에서 __moduleName 변수를 내보냅니다. CommonJS에서는 module.id로 설정할 수 있습니다.
templateUrlstring구성 요소 템플릿 파일의 URL입니다. 제공되는 경우 템플릿을 사용하여 인라인 템플릿을 제공하지 마세요.
templatestring구성 요소용 인라인 템플릿입니다. 제공된 경우 templateUrl을 사용하여 템플릿을 제공하지 마세요.
styleUrlsstring[]이 구성 요소의 CSS 스타일 시트가 포함된 파일을 가리키는 하나 이상의 URL입니다.
stylesstring[]이 구성요소에서 사용되는 하나 이상의 인라인 CSS 스타일입니다.
animationsany[]일부 state() 및 Transition() 정의를 포함하여 하나 이상의 애니메이션 Trigger() 호출.
encapsulationViewEncapsulation템플릿 및 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 기본 보간 표현식 시작 및 종료 구분 자 ({ entrycomponents
Any [] & gt; preserveWhitespaces
true이면 보존되고, false이면 가능한 추가 공백 문자가 컴파일된 템플릿에서 제거됩니다. 공백 문자는 JavaScript 정규식에서 s와 일치하는 문자입니다. 컴파일러 옵션을 통해 재정의되지 않는 한 기본값은 false입니다.

二、 selector 选择器

可使用下列形式之一：

  • element-name： 根据元素名选取
  • [attribute]： 根据属性名选取
  • .class： 根据类名选取
  • [attribute=value]： 根据属性名和属性值选取
  • not(sub_selector)： 只有当元素不匹配子选择器 sub_selector 的时候才选取
  • selector1, selector2： 无论 selector1 还是 selector2 匹配时都选取

2.1 <span style="font-size: 18px;">element-name</span>： 根据元素名选取

@Component({
    selector: &#39;app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
로그인 후 복사
로그인 후 복사
<app-element></app-element>
로그인 후 복사

2.2 <span style="font-size: 18px;">[attribute]</span>： 根据属性名选取

@Component({
    selector: &#39;[app-element]&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
로그인 후 복사
<div app-element></div>
로그인 후 복사

2.3 <span style="font-size: 18px;">.class</span>： 根据类名选取

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
로그인 후 복사
<div class="app-element"></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

三、 host: {[key:string]:string}

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。
Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。

  • 当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。
  • 当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。
  • 注意属性的值默认为变量，如果直接使用属性值，需要加字符串单引号或者双引号，变量直接在组件里定义即可

对于事件处理：

  • 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。
  • 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

3.1 <span style="font-size: 18px;">attribute</span> 和 <span style="font-size: 18px;">property</span>

  • property：dom元素作为对象附加的内容，例如childNodes、firstChild等
  • attribute：HTML标签特性是dom节点自带的属性

异同：

  • 部分属性既属于 property ，又属于 attribute ，比如 id
  • attribute 初始化后不会再改变； property 默认值为初始值，会随着 dom 更新

所以在 angular2 中双向绑定实现是由 dom 的 property 实现的，所以指令绑定的是 property ，但是在某些情况下 dom 不存在某个 property 比如 colspan，rowspan 等，这时想要绑定 html 标签特性需要用到 attr:

<table width="100%" border="10px solid">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>January</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>February</td>
  </tr>
</table>

let colnum:number = 2;
로그인 후 복사

3.2 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">class</span>

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;],
    host: {
        &#39;[class.default-class]&#39;: &#39;useDefault&#39;
    },
    encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则，默认胶囊封装避免CSS污染。
})
export class AppElementComponent {
  @Input() useDefault = true;
}
로그인 후 복사
<div class="app-element"></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

3.3 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">style</span>

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;],
    host: {
        &#39;[style.background]&#39;: &#39;inputBackground&#39;
    }
})
export class AppElementComponent {
  @Input() inputBackground = &#39;red&#39;;
}
로그인 후 복사
<div class="app-element"></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

3.4 使用 <span style="font-size: 18px;">host</span> 绑定事件

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;],
    host: {
        &#39;(click)&#39;: &#39;onClick($event)&#39;
    }
})
export class AppElementComponent {
  public onClick($event) {
    console.log($event);
  }
}
로그인 후 복사
<div class="app-element"></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

四、 encapsulation（封装）

供模板和 CSS 样式使用的样式封装策略。

4.1 Web Components

通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。

Web Components 由以下四种技术组成：

  • Custom Elements: 自定义元素HTML
  • Templates: HTML模板
  • Shadow DOM: 影子DOMHTML
  • Imports: HTML导入

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            color: #f00;
        }
    </style>
</head>
<body>
<p>我不在 Shadow Host内</p>
<div>Hello, world!</div>
<script>
 // 影子宿主（shadow host）
 var shadowHost = document.querySelector(&#39;.shadowhost&#39;);
 // 创建影子根（shadow root）
 var shadowRoot = shadowHost.createShadowRoot();
 // 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
 shadowRoot.innerHTML = &#39;<p>我在 Shadow Host内</p>&#39;;
</script>
</body>
<html>
로그인 후 복사

4.3 <span style="font-size: 18px;">ViewEncapsulation</span>

ViewEncapsulation 允许设置三个可选的值：

  • ViewEncapsulation.Emulated: 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。
  • ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
  • ViewEncapsulation.None: 无 Shadow DOM，并且也无样式包装

4.3.1 ViewEncapsulation.None

import { Component, ViewEncapsulation } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  template: `
    <h4>Welcome to Angular World</h4>
    <p class="greet">Hello {{name}}</p>
  `,
  styles: [`
    .greet {
      background: #369;
      color: white;
    }
  `],
  encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
로그인 후 복사

ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。

4.3.2 ViewEncapsulation.Emulated

import { Component, ViewEncapsulation } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  ...,
  encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
로그인 후 복사

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 &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  ...,
  encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
로그인 후 복사

ViewEncapsulation.ShadowDom 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染。

更多编程相关知识，请访问：编程视频！！

위 내용은 각도의 @Component 데코레이터에 대한 깊은 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
angular angular.js
원천：csdn.net
이전 기사：속성 설명자의 JavaScript 객체 지향 상세 분석 다음 기사：노드에 여러 버전을 설치하고 버전 간 전환하는 방법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
2015
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2179
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1838
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1730
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1750
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿