Angular の @Component デコレータについての深い理解-jsチュートリアル-php.cn

Component是Directive的子类，它是一个装饰器，用于把某个类标记为Angular组件。下面本篇文章就来带大家深入了解angular中的@Component装饰器，希望对大家有所帮助。

Angular の @Component デコレータについての深い理解

一、 `@Component` 装饰器

1.1 @Component 装饰器的用途

声明一个组件时，在组件类的之上要用@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 @Component 装饰器的常用选项

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

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

选项	类型	说明
selector	string	css选择器名，用于在模板中标记出该指令（组件），并触发其实例化
inputs	string[]	Angular 会在变更检测期间自动更新输入属性。inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项： · directiveProperty 用于指定要写入值的指令内属性。 · bindingProperty 用于指定要从中读取值的 DOM 属性。当没有提供 bindingProperty 时，就假设它和 directiveProperty 一样。
outputs	string[]	一组可供事件绑定的输出属性。当输出属性发出事件时，就会调用模板中一个附加到该事件的处理器。每个输出属性都会把 directiveProperty 映射到 bindingProperty： · directiveProperty 指定要发出事件的组件属性。 · bindingProperty 指定要附加事件处理器的 HTML 属性。
provides	Provider[]	服务提供商的集合
exportAs	string	一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们。
queries	{[key:string]:any}	配置将要注入到该指令中的一些查询。内容查询会在调用 ngAfterContentInit 回调之前设置好。试图查询会在调用 ngAfterViewInit 回调之前设置好。
jit	true	如果为 true，则该指令/组件将会被 AOT 编译器忽略，因此永远只会被 JIT 编译。这个选项是为了支持未来的 Ivy 编译器，目前还没有效果。
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 来获取事件数据。

1.2.2 @コンポーネント独自のオプション

##OptionsType説明changeDetectionChangeDetectionStrategyコンポーネントがインスタンス化されると、Angular は変更検出器を作成します。コンポーネントの各バインディング値の変更を伝播します。戦略は次のいずれかの値です。 viewProvidersProvider[]ビューのさまざまな子ノードで使用できる注入可能なオブジェクトのセットを定義しますmoduleIdstringこのコンポーネントを含むモジュールの ID。コンポーネントは、テンプレートとスタイルシートで使用される相対 URL を解決できなければなりません。 SystemJS は、すべてのモジュールの __moduleName 変数をエクスポートします。 CommonJS では、これを module.id に設定できます。 templateUrlstringコンポーネントテンプレートファイルの URL。提供されている場合は、インラインテンプレートを提供するためにテンプレートを使用しないでください。 templatestringコンポーネントのインラインテンプレート。指定されている場合は、templateUrl を使用してテンプレートを指定しないでください。 styleUrlsstring[]このコンポーネントの CSS スタイルシートを含むファイルを指す 1 つ以上の URL。 stylesstring[]このコンポーネントで使用される 1 つ以上のインライン CSS スタイル。 animationsany[]いくつかの state() およびtransition() 定義を含む、1 つ以上のアニメーション Trigger() 呼び出し。 encapsulationViewEncapsulationテンプレートと CSS スタイルで使用されるスタイルのカプセル化戦略。値は次のとおりです: interpolation[string, string]補間式のデフォルトの開始区切り文字と終了区切り文字 ({entryComponentsArrayany[]>preserveWhitespacesboolean が true の場合は保持され、false の場合は、コンパイルされたテンプレートから余分な空白文字が削除される可能性があります。空白文字は、JavaScript 正規表現の \s に一致する文字です。コンパイラオプションでオーバーライドしない限り、デフォルトは false です。

二、 `selector` 选择器

可使用下列形式之一：

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

2.1 element-name：根据元素名选取

@Component({
    selector: &#39;app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})

ログイン後にコピー

<app-element></app-element>

ログイン後にコピー

2.2 [attribute]：根据属性名选取

@Component({
    selector: &#39;[app-element]&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})

ログイン後にコピー

<div app-element></div>

ログイン後にコピー

2.3 .class：根据类名选取

@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 attribute 和 property

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 使用 host 绑定 class

@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 使用 host 绑定 style

@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 使用 host 绑定事件

@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 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 &#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 形式渲染。

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

以上がAngular の @Component デコレータについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。


		· ChangeDetectionStrategy#OnPush(0) 戦略を CheckOnce (オンデマンド) に設定します。 ·ChangeDetectionStrategy#Default(1) 戦略を CheckAlways に設定します。







		・ViewEncapsulation.ShadowDom: Shadow DOM を使用します。 Shadow DOM をネイティブにサポートするプラットフォームでのみ動作します。 · ViewEncapsulation.Emulated: シムされた CSS を使用してネイティブの動作をエミュレートします。 · ViewEncapsulation.None: カプセル化せずにグローバル CSS を使用します。指定しない場合、値は CompilerOptions から取得されます。デフォルトのコンパイラオプションは ViewEncapsulation.Emulated です。ポリシーが ViewEncapsulation.Emulated に設定されており、コンポーネントでスタイルまたは styleUrls が指定されていない場合、自動的に ViewEncapsulation.None に切り替わります。
		{ および }}) をオーバーライドします。

Angular の @Component デコレータについての深い理解

一、 @Component 装饰器

二、 selector 选择器

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

四、 encapsulation（封装）

一、 `@Component` 装饰器

二、 `selector` 选择器

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

四、 `encapsulation`（封装）